What's your best and easiest method of doing animations in Webflow?
Webflow interactions is the best way to do so. There's loads of helpful tutorials on Youtube on how to learn this. Some Relume components also already come with cool animations baked in to them so there's that as well but always good to learn Webflow interactions so you can troubleshoot if any components aren't working properly. GSAP is also a great option but has a steep learning curve.
Follow up to this topic, whats the best or most recommended way to implement the webflow interactions site wide and in a scaleable manor?
Ive seen some devs say to create new classes with interactions on them and add those as combos but then adding some interactions to the style guide seems like a good idea. And there could be others too.
I'll echo that. I've found Webflow interactions end up being clunky since you have to create a new interaction for each item. Is there an easier way?
I haven't got extensive experience with Webflow interactions. I tend to just reuse a few animations for different section items which doesn't take too long. For scalability you can set the animation in the settings to apply to any element that has the same class
Yes, I agree Webflow interactions can be quite clunky and too many animations can slow down your site as they are quite bulky. In that instance I'd say invest in learning GSAP. It's the future and all the websites with the best animations use it.
Hey @Matt we have an open discussion here, would you have a sec to provide us with your take, please?
Nice discussion here! Thanks for tagging me in John.
Best resources for this is this article about it - in short - toggling the interaction to target by class instead of element is the fastest way to apply/reuse interactions. If you do this, and also create a custom class just for this animation, you could then have even more fine-tuned control over what elements get this animation - really depends on the animation.
As for GSAP - Webflow acquired GSAP recently and I'm sure that the Webflow team is integrating it natively into Webflow - so in the future there won't even be a discussion about Webflow Interactions versus GSAP - it'll be one in the same. I do agree as it stands today, GSAP is the industry standard for lightweight and performant animations and if you can spend the time to learn it, the investment will pay off - even after Webflow integrates it natively - I'm sure there will be limitations that knowing how the actual code works, will benefit you. You can never go wrong with learning how something works at its core.
https://help.webflow.com/hc/en-us/articles/33961261290387-Reuse-interactions#how-to-create-a-button-arrow-move-interaction
Thanks @Matt. I noticed a site I did recently ranked really high in speed, and I think it may have been because all my animations besides one were in GSAP. Could that be?
I've actually been using a combination of the FlowScriptsGPT and Claude to get my gsap animations right, and it works really well, so I don't need to learn the JScript. Of course it would be helpful to know what all that code means, but AI does a really great job.
Can you see any setback to that?
Nope, see no setback there. I just meant once GSAP gets integrated natively, you’d be using the Webflow UI and I’m sure they wont have the same advanced power that the raw code would.
meaning you think GSAP is going to take the place of Webflow interactions? That would be so cool
