Intro to Interactions

Use interactions to make your site more dynamic and engaging.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

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.

An example animation that shows the Hero title’s skew changing upon page load.

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 the Webflow Designer, 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.

The Element trigger menu is expanded in the Interactions panel.
The Page trigger menu is expanded in the Interactions panel.

What constitutes an interaction?

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). 

Icons illustrating the triggers “click,” “scroll,” “hover,” “mouse movement,” and “page load.”

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.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top