As the things are moving around all over the page, Handling animations on responsive screens becomes too difficult to handle.. I usually end up writing my animations for larger screens and just hide them in the smaller ones.
How do you handle animations for responsive screens?
imo, you should just avoid using animations for mobile devices. Apart from the tricky animation situations, there's also a risk of a choppy experience as phones are not as well equipped to handle graphic intensive tasks as.. say, a desktop system.
This though, is changing. Phones are becoming fast and snappy literally every day so it's not actually a bad idea to deliver a rich experience to your mobile users.
Val Head has written a really amazing guide on handling responsive animations which you can follow: 24ways.org/2015/animation-in-responsive-design/
Hope it helps! ๐
Jeff Skelton
Burrito Enthusiast
Well there is no one true way IMO. It all depends on what you are working on at that particular moment. That said, I find that there are less headaches when using the following approach:
If you need to get really crazy, libraries like TweenMax from Greensock can really help you out. You'll need to employ a good amount of math for responsive work since you will need to calculate your item positioning based on viewport size etc.
The approach you outlined is perfectly valid assuming your client/boss is cool with it. Excessive animation on mobile devices usually looks kinda janky anyways. Anyways, hope my 2 cents helps!