Community forum for knowledge and support

Updated 8 months ago

Optimizing animations for responsive design

At a glance

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

M
S
9 comments

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.

Thanks. I feel like the process of creating the animations is very clunky and takes a long time. Is it just me?

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.

you can use GSAP for regular standard animations?

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.

I've never really looked into it but maybe now I will. Is it easy to learn?

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!

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.

cool. thanks! will look into it

Add a reply
Sign up and join the conversation on Slack