ç

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.

Pause the background video

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.

Tie motion to scroll progress

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

Craft animations that build as you scroll

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

Build microinteractions around mouse movement

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

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

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.

view more

Reveal content on click

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

Create rich hover animations

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

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

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.

Entrance Effects
Grow
Slide
Fade
Spin
Emphasis Effects
Jello
Bounce
Rubber
Jiggle

After Effects & Lottie

Integrate After Effects and Lottie animations

Control the playback of After Effects and Lottie animations with Webflow’s interactions triggers — no need to write line after line of complex javascript.

Learn more on Lottie course

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
  • After Effects & Lottie