Intro to Interactions

Use interactions to make your site more dynamic and engaging.

interactions-animations
 
This video features an old UI. Updated version coming soon!
This video features a third-party integration, and the UI may not be up to date. Visit their documentation for up-to-date info!

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.

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

A box that contains other boxes inside is called __ and the boxes inside another box are called __

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

If you drag an element onto an empty canvas in Webflow, where will it automatically be placed?

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which CSS property affects the the outside of an element?

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which HTML element is used to define a paragraph element?

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

What are the different types of HTML elements called?