Motionfor bolderideas.

Webflow animations to explore, take apart, and make your own.

Explore the library ↗

How it works

A closer look at what moves.

Choose an example

Browse the library and find a movement that fits your next project.

Open the recipe

See the live demo, then follow its element structure, classes, attributes, and code.

Make it your own

Adjust the timing and movement to suit your page. Each guide explains what to change.

The library

Small details. More possibilities.

Explore 30 Webflow animation examples, from simple reveals to draggable canvases. Each one includes a live demo and a build guide.

MUST

Webflow must-haves

Reveals, buttons, counters, and navigation. Useful starting points for everyday projects.

/ 30

Scroll · foundation

The reveal system

Reveal text, images, and card groups as they enter the viewport, with shared timing and stagger.

ScrollTrigger · matchMedia

Recipe →

/ 30

Scroll · numbers

Counters & stat blocks

Count toward a final value on scroll, with stable digit widths and configurable number formatting.

ScrollTrigger

Recipe →

/ 30

Hover · micro

Buttons & links

Four button and link treatments: magnetic movement, a sliding fill, character swaps, and an underline.

quickTo · Timeline

Recipe →

/ 30

State · height

Accordion & FAQ

An expanding FAQ with animated content height and a plus icon that changes as each answer opens.

Timeline · ScrollTrigger

Recipe →

/ 30

Text · SplitText

Masked text reveal

Reveal headlines from behind masks, split into lines, words, or characters.

SplitText · ScrollTrigger

Recipe →

/ 30

Layout · sticky

Footer reveal

Uncover a footer beneath the page as the final section scrolls away.

ScrollTrigger

Recipe →

/ 30

Scroll · depth

Global parallax engine

Move images and background layers at different speeds to create depth on scroll.

ScrollTrigger · matchMedia

Recipe →

/ 30

Loop · velocity

Velocity marquee

An infinite text track that responds to scroll speed and direction.

ScrollTrigger · quickTo

Recipe →

/ 30

Nav · direction

Scroll-aware navigation

Hide navigation on downward scroll and bring it back when visitors scroll up.

ScrollTrigger · quickTo

Recipe →

The Webflow standards

Sticky cards, horizontal galleries, and scroll-linked layouts.

/ 30

Scroll · state

Process timeline

Fill a vertical progress rail and highlight each step as it comes into view.

ScrollTrigger · toggleClass

Recipe →

/ 30

Scroll · navigation

Progress bar & section dock

Pair reading progress with a table of contents that follows the current section.

ScrollTrigger · quickSetter · quickTo · Lenis

Recipe →

/ 30

Scroll · sticky

Sticky stacking cards

Stack sticky cards as visitors scroll, with each earlier card receding into the background.

ScrollTrigger · matchMedia

Recipe →

/ 30

State · autoplay

Sticky feature tabs

Cycle through feature tabs with a timed progress indicator and offscreen pause behavior.

ScrollTrigger · Timeline

Recipe →

/ 30

Hover · sticky

Sticky media list

Swap a sticky image when visitors hover over the matching list item.

quickTo · gsap core

Recipe →

/ 30

Scroll · pin

Pinned horizontal section

Move a pinned gallery horizontally as the page scrolls, with a separate mobile layout.

ScrollTrigger · containerAnimation · matchMedia

Recipe →

Craft

Text masks, image reveals, and drawn lines. A study in timing and detail.

/ 30

Reveal · clip-path

Clip reveal with counter-scale

Open an image mask while counter-scaling the image inside it.

ScrollTrigger

Recipe →

/ 30

Text · decode

Text scramble

Cycle through temporary characters before revealing the original text.

gsap core · ScrollTrigger

Recipe →

/ 30

SVG · DrawSVG

SVG that draws itself

Animate SVG strokes for line drawings, charts, and circular progress indicators.

DrawSVGPlugin · ScrollTrigger

Recipe →

/ 30

Text · scrub

Text that fills as you scroll

Highlight words or phrases in sequence as visitors move through a section.

SplitText · ScrollTrigger

Recipe →

/ 30

Pointer · state

Custom cursor system

Create a layered cursor with different follow speeds and interaction states.

quickTo · gsap core

Recipe →

Systems

Page transitions, loading sequences, and theme changes that connect an experience.

/ 30

System · site-wide

Theme inversion on scroll

Switch navigation colors to suit the section passing beneath it.

ScrollTrigger

Recipe →

/ 30

Load · choreography

Preloader with a real handoff

Connect a loading counter to image progress, then reveal the opening section.

gsap core · Timeline

Recipe →

/ 30

System · navigation

Page transitions in Webflow

Cover the page with a column wipe before navigating to the next view.

gsap core · Timeline

Recipe →

/ 30

Drag · physics

Draggable inertia slider

Drag a card track with momentum, edge snapping, and velocity-based skew.

Draggable · InertiaPlugin · Observer

Recipe →

Spatial experiments

Shared-element transitions, image trails, and galleries with depth.

/ 30

Pointer · pooling

Image trail

Leave a reusable trail of images along the pointer’s path.

gsap core

Recipe →

/ 30

Flip · shared element

Flip shared-element gallery

Move a selected gallery image into a larger detail view with a shared-element transition.

Flip

Recipe →

/ 30

3D · scrub

Scroll-driven depth gallery

Move through a gallery arranged in three-dimensional space as the page scrolls.

ScrollTrigger · quickSetter

Recipe →

Beyond the page

Draggable fields, liquid type, and WebGL distortion. For projects that invite exploration.

/ 30

Drag · wrap · Flip

Infinite draggable canvas

Explore a draggable field of tiles that wrap around the canvas edges.

Draggable · InertiaPlugin · Observer · Flip · utils.wrap

Recipe →

/ 30

Shader · GPU

WebGL distortion panel

Blend between images with a noise-based dissolve and scroll-responsive distortion.

ScrollTrigger · quickTo · gsap.ticker · raw WebGL

Recipe →

/ 30

Shader · type

Liquid text

Distort a canvas rendering of a headline while retaining the original text in the document.

quickTo · ScrollTrigger · gsap.ticker · raw WebGL

Recipe →

Before you begin

How do I add these animations to Webflow?

Some examples use Webflow’s Interactions panel; others use GSAP scripts. The guide for each example explains which setup it needs.

Route A — Interactions panel

4 fully · 14 partly

Designer → Interactions. No code, works on the free plan. You pick the element and animate it directly. It never reads custom attributes.

Route B — Custom code

12 script-only

Page settings → Before </body>. Paste the recipe’s script; it queries the data attributes, which is where they finally matter. Needs a paid plan.

The full setup guide

Make it your own

Find a detail. Make it yours.

Explore the project in Webflow and adapt an interaction for your next build. Start with the setup guide if you’re new to GSAP.

Start with the setup guide Browse the library