I just had the same question and figured it out!
If you go to the official MixItUp website there’s a sandbox that you can use to change the animation style. The “settings” icon at the top right lets you adjust options like fading, moving, rotating, etc. Change the settings and then click the filters at the top left to see them in action.
When you’re happy with the animation settings, click the “Export config” button in the settings panel. Copy and paste the config to your code. I followed the same blog post so the end of your code will look like this after pasting your config:
*// 6) Call the MixitUp plugin*
mixitup(containerEl);
{
"animation": {
"duration": 250,
"nudge": false,
"reverseOut": false,
"effects": "fade translateY(20%) stagger(30ms)"
}
}
</script>
However, we’re not done yet. We need to attach the options we pasted in to the mixitup call. Do so by removing the ); from mixitup(containerEl); and adding a comma,
Now your code should look like this:
*// 6) Call the MixitUp plugin*
mixitup(containerEl, {
"animation": {
"duration": 250,
"nudge": false,
"reverseOut": false,
"effects": "fade translateY(20%) stagger(30ms)"
}
}
</script>
Still not done though. Three things.
- We need to mark the end of the code properly by closing everything up with the
); we removed earlier.
- For some reason, the sandbox doesn’t give you the right syntax. It gives you extra quotations where you don’t need them and that breaks the code. To fix it, remove the double quotations around the properties like “animation”, “duration”, “nudge”, “reverseOut”, and “effects”.
- In the effects property, there are also double quotations. Change these to single quotations.
So now your code should look like this and it should work!
*// 6) Call the MixitUp plugin*
mixitup(containerEl, {
animation: {
duration: 250,
nudge: false,
reverseOut: false,
effects: 'fade translateY(20%) stagger(30ms)'
}
});
</script>
