A Few Tips on Working With Interactions in Webflow
Webflow’s interactions offer a great interface to bringing life and movement into your websites without the need for custom code.
Whether you’re creating subtle micro-interactions or advanced, multi-step scroll animations, they can all help elevate your designs and engage your users.
However, working with them requires a good understanding of its possibilities and nuances. In this article, I’ll share a few tips on how to work efficiently and avoid common pitfalls when creating interactions in Webflow.
1 — Finish your interactions before turning elements into components
TL;DR — The title.
As of October 2024, there’s this frustrating bug that breaks working with interactions within an already-created Webflow component. This bug makes it difficult to apply or modify interactions inside a component, which makes everything super frustrating.
One of the most annoying scenarios is when you’re trying to animate an element that exists outside the component, or something that exists within another component.
This leaves you with two inconvenient choices: either unlink the component, apply the interaction, and rewrap the component afterward, or duplicate the element outside the component to work with it separately.
To add to the complexity, there’s also a strange bug that causes interactions to be duplicated when unlinking a component, forcing you to delete the duplicated interaction and re-applying the original one.
Until this is fixed, just finish all your interactions on an element before turning it into a component.
2 — Easily reverse secondary interactions
Have you ever created a hover in / out interaction (or similar two-part interaction) and felt frustrated having to remember each element that’s being animated on the hover in interaction required to replicate the hover out interaction?
Of course you have. Luckily there’s a quite smart solution to that. And it’s super simple.
- Start by duplicating your hover in interaction.
- Delete all but the initial key frames (shift + click to select multiple).
- Deselect the “initial” setting for all remaining key frames.
- Apply any delay, easing or timing that’s required.
- Done.
3 — Prohibit page load animations getting stuck
Since I’m a template designer, I get a few support emails every now and then. One of the most common problems customers seem to face is related to breaking load animations.
What usually happens is that the animation gets triggered on page load, but somewhere in the middle it breaks down and refuses to play the remaining key frames.
This is most often caused by elements animated in the load animation having changed or being deleted in the designer. If you face this problem, the solution is to go through each key frame in your load interaction and delete the one(s) that aren’t connected to an element on your page.
4 — Proper navbar interactions
It’s almost embarrassing how long it took me to discover the navbar interaction trigger in Webflow. But once I did, it solved so many issues with the native navbar that I hadn’t even noticed before, especially when animating lottie icons.
You see, I always assumed that on lower breakpoints, you should put the open and close navbar interactions on the menu button itself, in which I animated my lottie icon animations.
However, this is wrong. Instead, you should use the built-in “navbar opens” trigger.
This trigger will automatically triggers whenever the navbar open or closes, and will consistently play whatever lottie / other animation you’re using in your navbar without having to rely on specific button clicks.
Please note that the “Navbar opens” trigger only exists on the native navbar element inside Webflow.
Class based triggers
Have you ever want to use the same animation on multiple elements and places in your Webflow project? Well, maybe a class based trigger could help you out.
What I mean by class based trigger is to create a specific class, of which an interaction is placed on, and use this class on multiple elements in your project.
This simplifies your Webflow project, as well as decreases the Javascript rendered by having multiple of the same interaction in a project.
Conclusions
This was a rather short, but hopefully somewhat helpful guide on working with interactions in Webflow.
If you have any questions, feel free to ask them in the comments, or send me an email over at my website.
Also make sure to take a look at my minimal Webflow templates on the marketplace, or follow me on Instagram if you wish.
