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:

• Employ a pre-processor framework like Sass so you can leverage variables, nested media queries, and mixins (the latter will save you a ton of time since you can write up some generic animation functions for yourself).
• Start with the smallest viewport size and set everything up as you would like for it to be. Once done, move out to the next largest viewport you intend to work on and see where things are at. Chances are there will be only a few things to adjust. Use media queries to adjust what needs to be tweaked.

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!

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! 😊