Intro to interactions (legacy)

This article features the legacy interface for Interactions, which you can activate in the Designer by using the switch at the top of the Interactions Panel. To see the relevant article which uses the new Interactions Panel, check out our updated course on this topic.

Interactions overview

Interactions bring websites to life. With Webflow, you can quickly and easily create custom interactions that move, scale, rotate elements, and much more. You can also change an element's width, height, opacity, or how it displays.

Structure of an interaction

Every website interaction has two parts: triggers and steps. Triggers tell the browser “when” to run an interaction. Steps are the visual changes that happen after the Trigger.


The first thing you set up when creating an Interaction is a trigger. Depending on the complexity of your Interaction, you can have one trigger or many. And with eight different trigger types at your fingertips, the sky’s the limit when it comes to interactivity.

Here are the eight triggers you can use:

  • Page Load: when the webpage finishes loading
  • Click: when an element is clicked
  • Hover: when an element is hovered over
  • Scroll: when an element scrolls in and/or out of view
  • Tabs: when a tab opens and/or closes
  • Slider: when a slider comes in and/or out of view
  • Navbar: when a navigation menu opens and/or closes
  • Dropdown: when a dropdown menu opens and/or closes

Trigger settings

You can customize your triggers with the following settings:

  • Affect other elements: Set one element as a trigger to affect other elements with a specific class
  • Limit to nested elements: Set a parent element as a trigger to affect a child element
  • Limit to sibling elements: Set a sibling element as a trigger to affect another sibling.
  • Loop: Continuously repeat an interaction


As soon as someone interacts with a trigger, your steps will run in sequence from top to bottom. You can string together many steps to produce some amazing animations.

Here are the steps you can use in Webflow:

  • Move: Move an element to a new position on the page
  • Scale: Enlarge or shrink an element
  • Rotate: Rotate an element
  • Width & Height: Adjust an element’s width and/or height property
  • Opacity: Increase or decrease an element’s opacity
  • Display: Change an element’s display property (e.g., inline to none)
  • Wait: Add time between steps

Initial appearance

An element’s initial appearance defines how it looks before an interaction affects it.

Setting an element’s initial appearance allows you to continue building your site while in the Designer and only makes visual changes when someone visits your published site.

Creating interactions

To create an interaction:

  1. Select the element you want to interact with
  2. Go to the Interactions Panel (H) on the right
  3. Click the + button

Name your interaction

Give your interaction a name that describes what it does, so you can easily find it later. Here are a few good names for a single interaction:

  • ‍Fade In Logo on Page Load
  • Logo: Fade In on Page Load
  • On Page Load: Fade In Logo
If you’re not careful with your names, you could find yourself wasting time looking for the right one, overwriting other interactions, or even accidentally deleting interactions.


Triggers define the user actions that will start an interaction.  The most common triggers are Click and Hover, but Webflow offers 8 different triggers. Spend some time exploring each and you’ll discover fun new ways for people to interact with your website.

To define your trigger:

  1. Click Add Trigger
  2. Select the trigger that fits your needs


Steps are the different phases of visual change that make up an interaction. They offer you a fun way to enhance your website’s user experience with visually stunning effects and animations.

Each step runs independently from top to bottom, but every property you change in a single step happens simultaneously.