The setup:
I want to setup my site with my own id names, so i have set up the containers data-containers="#base #nav"
The problem:
Now the swup animation does not work anymore. This is because the animation plugins also use an option on them to name the main element of the animation({{ mainElement: '#swup' }). See documentation.
The setup: I want to setup my site with my own id names, so i have set up the containers
data-containers="#base #nav"
The problem: Now the swup animation does not work anymore. This is because the animation plugins also use an option on them to name the main element of the animation(
{{ mainElement: '#swup' }
). See documentation.https://swup.js.org/themes/fade-theme https://github.com/swup/fade-theme/blob/master/src/index.js#L11
The solution Add a
data-main-element
attribute so we can also setup the main elements for the animations.