Intro to Interactions

A brief overview of triggers and animations.

This video features an old UI. Updated version coming soon!

Over the years, the web and our digital devices have become responsive and powerful. As designers and developers, we have access to tools that let us build complex interactions and impressive animations.

A webpage called Megan Garcia Portfolio displaying a trigger from the start to finish. On the left is the page upon arrival, on the right the page load trigger has occurred. The page trigger section is overlaid on the left website screenshot including two triggers, page load and while page is scrolling.

A selected projects card that includes an element trigger called mouse hover is displayed. On the left is the element's none state. On the right is the element's hover state with a colorful gradient drop shadow underneath the element.

Traditionally, these tools are often built with highly-specificJavaScript libraries, requiring tools and plugins complete with conflicts, quirks, and obscene code-based learning curves.

In the Webflow Designer, we have access to all the tools we need to manipulate this content with insanely granular control — by building interactions visually.

A website called GEM studio has loading elements on the home page. The Main listing is selected and the interactions panel is open to the loading elements settings section.

Check out some cool examples.

What constitutes an interaction?

Interactions let us design around two powerful things: triggers and animations. (If this happens, then this happens.) A trigger — whether it's clicking, scrolling, hovering, moving the mouse, loading the page — executes an animation (what happens on that trigger).

Black icons are illustrating the triggers clicking, scrolling, hovering, moving mouse and loading page.

And 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 everything you need to know about triggers and animations.

Try Webflow — it's free