Use interactions to make your site more dynamic and engaging.
Important
We’ve introduced Webflow Interactions with GSAP –– designed to help you create smooth, performant, reusable animations directly on Webflow’s visual canvas without extra tools or plugins. This article covers building with Classic interactions.
Over the years, the web and digital devices have become responsive and powerful. As designers and developers, we have access to resources that let us build complex interactions and impressive animations.
Traditionally, these resources are often built with highly-specific JavaScript libraries, requiring tools and plugins complete with conflicts, quirks, and difficult code-based learning curves.
In Webflow, we have access to all the tools we need to manipulate this content with immensely granular control — by building interactions visually.
Check out some cool examples. Warning: This content has flashing lights and animations which may affect people with visual sensitivities.
What constitutes an interaction?
Classic interactions let us design around 2 powerful things: triggers and animations (e.g., if this happens then that happens).
A trigger (e.g., a click, scroll, hover, mouse movement, page load, etc.) executes an animation (what happens on that trigger).
With this precise control, we can apply timed animations, scroll animations, and position-based mouse animations however we want, to give us the power to build anything we want.
Get started by learning more about triggers and animations.
Troubleshooting interaction issues
Interactions may not work as expected on published sites if your site incorporates custom code. Custom code is an advanced modification that may conflict with Webflow’s underlying functionality. Our support team is unable to provide direct help with custom code setup or troubleshooting as these topics fall outside the scope of our customer support policy. If you run into issues with custom code, please let us know on the Webflow Forum, where the entire Webflow community (staff included) can provide additional help and resources.