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.

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.

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.

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.

view more

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

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

Master Webflow Interactions

Head to Webflow University and get up to speed with the Interactions and Animations Course.

Go to class

Learn interactions from this page

All features

Discover everything you can do with Webflow.

Localization

Create fully localized experiences for site visitors around the world.

Discover feature

CMS

Define your own content structure, and design with real data.

Discover feature

Page building

new

Launch simple landing pages quickly and easily.

Discover feature

Edit mode

Custom-built environment for content teammates.

Discover feature

Designer

The power of CSS, HTML, and Javascript in a visual canvas.

Discover feature

SEO

Optimize your website with controls, hosting, and flexible tools.

Discover feature

Interactions

Build websites interactions and animations visually.

Discover feature

Hosting

Set up lightning-fast managed hosting in just a few clicks.

Discover feature

Figma to Webflow

Turn your static designs into clean, production-ready code.

Discover feature

Grid

Build smart, responsive, CSS grid-powered layouts in Webflow visually.

Discover feature

DevLink

Create production-ready React components visually in Webflow.

Discover feature

Logic

Create custom automated workflows and connect to third-party apps.

Discover feature

User Accounts

Build gated content experiences for your audience.

Discover feature

Ecommerce

Goodbye templates and code — design your store visually.

Discover feature