Designer
CMS
Hosting
Editor
Interactions
Designer
CMS
Hosting
Editor
Interactions

Build website animations and interactions visually

Webflow's interactions and animations tools bring all the power of CSS and JavaScript into a completely visual tool, empowering designers to build complex, rich animations without even thinking about code.

Get started for free

Easily create scroll-based parallax animations

Link your animations and motion to scroll progress to achieve effects like parallax, precise reveal animations, progress bars, or whatever else you can dream up.

Scrolling in view
Tutorial: Parallax movement on scroll
3:10

Tie motion to scroll progress

Transform element sizes, styling, and position based on scroll progress over a specific element or the entire page.

Scrolling in view
Tutorial: Scroll progress indicator 
2:50

Craft animations that build as you scroll

Bring expressive animations to your sites that build as users move down the page.

Scrolling in view
Tutorial: Scroll-based animation
2:36

Build microinteractions around mouse movement

Link animations and movement to your cursor position to catch visitor’s attention and craft precise microinteractions.

Mouse movement
Hover trigger may not be supported on all touch devices, many devices will activate hover by using a tap event.
Tutorial: Rotation on mouseover
6:27

Create rich, multi-step animations

Creating rich, timeline based animations is as easy as setting up PowerPoint or Keynote animations — but the result is clean, working code.

Timed animations
Tutorial: Page load animation
4:56

Bring your website to life

Introduce a new layer of interactivity to your sites by bringing motion and animation to buttons, section reveals, and more.

Scroll into view
Tutorial: Reveal elements on scroll 
4:38

Reveal content on click

Show modals, panels, and other hidden elements on click to give sites a new level of interactivity.

First and second click
Tutorial: Show/hide elements on click
5:01

Create rich hover animations

Transform elements, update styles, and reveal new content on hover.

Hover over and out
Hover trigger may not be supported on all touch devices, many devices will activate hover by using a tap event.
Quick Effects

Quickly add preset interactions

Need to add something simple? Choose from more than 20 prebuilt interactions and animations and add them to your site with a just a few clicks.

Read more about Quick Effects

Elements

and triggers

Hover over and out
First and second click
Mouse movement
Scroll progress
Scroll into and out of view
Scroll up and scroll down
Page starts loading
Page finishes loading
Slider panel change
Tab panel change
Dropdown open
Navbar menu open

Effects

and controls

Move
Scale
Rotate
Skew
Opacity
Background color
Border color
Text color
Width / height
Show / hide
Loop
Easing
Duration / delay
Per breakpoint visibility

Visit the launch page

Get started for free

Over 1,000,000 designers can't be wrong.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form