Responsive Design?

[endrehegyi]

Hi,

Just wondering, how would one handle animations if different animations are needed for mobile and desktop?

If it isn't included it would be nice if the animations could have responsive modifiers, like: md:fade md:left lg:fade-none

Thank you.

[mattaningram]

There are two ways to do this in AnimXYZ currently.

If you are using the Vue or React packages, you can use the dynamic XYZ attribute. Check out the docs for them here: Vue and React. You would have to setup your own logic to detect viewport size and trigger different XYZ animations for each.

Another approach is to use the AnimXYZ CSS variables that drive every animation. Instead of using the xyz= attribute you can just set the desired XYZ variables (such as --xyz-translate-x: 20%) on the elements you are animating and use standard CSS media queries to modify them for different screen sizes. Check out the docs for variables here and let me know if you have any questions about how to use them!