Best Practices for Animations Across Different Breakpoints

·

With animations, is it good practice to do different animations for different breakpoints or best to try to keep one animation that works for all? I'm asking in a case that I have 3 boxes next to each other on mobile and I want #1 to fade in, and then .5 seconds later #2 to fade in and the same for #3, but on mobile it's only 1 column and I don't want that delay. Any tips? Thank you

9 comments

Matt J.
·
Sara M. yeah perfectly fine to have animations that are specific to breakpoints. Happens all the time, and your use case sounds like the exact reason for doing it.
Sara M.
·
Thanks. I feel like the process of creating the animations is very clunky and takes a long time. Is it just me?
Matt J.
·
Nope, not just you. That's why a lot of veterans have resorted to using GSAP or other animation libraries for interaction/animations. Just depends on what you are trying to do.
Sara M.
·
you can use GSAP for regular standard animations?
Matt J.
·
As far as I know, there's no limit to what you can use GSAP for...I guess I am not 100% sure on that but yeah. Its a JS library so I don't see any reasons for why it would be limited at all.
Sara M.
·
I've never really looked into it but maybe now I will. Is it easy to learn?
Matt J.
·
I would overall say its not easy, no. Its more advanced. But I also know that you can do it. Its just part of evolving as a Webflow developer - its the next rung in the ladder. Give it a shot!
Matt J.
·
Biggest challenge will be moving from a visual animation tool to a non-visual animation tool. It'll be a lot of trial and error.
Sara M.
·
cool. thanks! will look into it