Free Webflow animations · 24 examples

Webflow animations to copy and paste

[A]Short answer

These are free Webflow animation examples: GSAP hero timelines, reveal-on-scroll sections, marquees and hover effects. Click one, press Copy for Webflow, then ⌘V (Ctrl+V) in the Designer. GSAP animations paste as native Webflow Interactions you can edit in the Interactions panel; CSS-only effects keep a small Embed.

Browse animations ↓Convert your own GSAP code

Webflow hero section with a fade-up animation (free)

4 GSAP animations → Webflow Interactions. Centered headline, text and 2 buttons. GSAP fades each part in.

Webflow navbar with a mobile menu (free)

A hamburger button opens the menu on mobile. The lines change to an X.

Webflow GSAP hero animation with stagger (free)

1 GSAP animation → Webflow Interactions. A GSAP timeline shows the badge, title, text and a chart, one after the other.

Webflow scroll animation: reveal on scroll (free)

2 GSAP animations → Webflow Interactions. 6 feature cards. ScrollTrigger shows them one by one when they come into view.

Webflow pricing table with a monthly / yearly toggle

A switch changes the prices of 2 plans from monthly to yearly.

Webflow logo marquee (infinite scroll, free)

Logos move from right to left without end. The row stops when you hover it.

Webflow cards with a mouse spotlight effect (free)

A light follows the mouse pointer over each card.

Webflow FAQ accordion (free, copy and paste)

Click a question to open or close its answer.

Webflow tabs component (free, copy and paste)

Three tabs switch between feature panels, with accessible tab roles.

Webflow testimonial slider (free carousel)

A testimonial carousel with previous and next arrows, dots and autoplay.

Webflow text hover effect: letters roll up one by one

Big menu links whose letters roll up one after another on hover, with a colored copy rolling in underneath.

Webflow text reveal on scroll (blinds effect)

Each line of a heading opens like a window blind as it scrolls into view, and plays again when you scroll back.

Webflow copy email button (click to copy)

A button that copies your email address to the clipboard and confirms it, so no mail app opens.

Webflow magnetic hover effect for social icons

Social icons that lean toward the pointer, with a label that follows it.

Webflow x-ray hover effect (reveal lens)

Move over a product picture and a round lens shows a blueprint layer underneath.

Webflow scratch card (scratch to reveal)

A silver scratch card visitors rub off with the mouse or a finger to uncover a code.

Webflow pixelated image reveal

An image that starts as big pixels and sharpens step by step when it scrolls into view.

Webflow gooey dropdown menu

A menu button whose items drip out of it like liquid and merge back in when it closes.

Webflow hover reveal cards (circle mask)

Service cards that fill with color in a growing circle that starts where the pointer comes in.

Webflow dock with magnifying icons

A row of app icons that grow as the pointer passes over them, with a label above the one you're on.

Webflow navigation with a sliding pill

A highlight pill that stretches across to the link you point at, then settles on it.

Webflow scroll effect: one image splits into three

One picture that splits into three tilted panels as you scroll past it.

Webflow button with an animated WebGL shader

A call-to-action button with a live WebGL shader inside that speeds up on hover.

Webflow interactive dot globe

A spinning globe made of dots with depth shading, which visitors can drag to turn.

How to add one to your site

  1. Pick an animation below and click it to open the preview.
  2. Click Copy for Webflow.
  3. Open your page in the Webflow Designer, select where it should go and press ⌘V (Ctrl+V).
  4. Open the Interactions panel to change the timing, or publish to your webflow.io domain to see it play.

Webflow GSAP, in short

  • Webflow Interactions run on GSAP, and GSAP is free in Webflow, plugins included.
  • You still can't paste GSAP code into the Interactions panel. FlowPaste converts it for you: GSAP to Webflow Interactions.
  • ScrollTrigger becomes a scroll interaction; scrub: true becomes a scroll-linked one.
  • Rotations, colors, clip-path and pins stay as custom code.

Webflow animation questions

How do I add animations in Webflow?

Select an element, open the Interactions panel and add a trigger (page load, scroll into view, hover or click) with actions like move, fade or scale. Or paste a ready-made animation: the examples on this page paste as Webflow Interactions you can edit.

Does Webflow use GSAP?

Yes. Webflow acquired GSAP, made it free (plugins included), and its Interactions now run on GSAP on every plan. You can turn on the GSAP integration in Site settings to load GSAP for your own scripts.

Can I convert my own GSAP code into Webflow Interactions?

Yes. Paste the HTML and the GSAP script into FlowPaste: gsap.from, to, fromTo, timelines, staggers and ScrollTrigger become Webflow Interactions with the same timing. Anything else stays as custom code and the notes tell you which.

How do I make a scroll animation in Webflow?

Add a Scroll into view interaction to the element, or a While scrolling in view interaction for scroll-linked movement. A GSAP ScrollTrigger animation converted by FlowPaste becomes the same interactions automatically.

Why don't animations play in the Webflow Designer?

The Designer shows the start state. Interactions play in Preview and on the published site, and some scroll interactions only play reliably on the published site. Publish to your webflow.io staging domain to check them.

Are these Webflow animations free?

Yes. Copy them with no account and use them on client sites and your own sites.