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.

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 web page 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

Steps

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, pick the element you want to interact with, go to the Global Objects tab, and click the + button in the Interactions area.

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.

Trigger

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 news ways for people to interact with your website.

To define your trigger:

Click “Add Trigger”

Select the trigger that fits your needs.

Step

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.