GSAP in Webflow Cheat Sheet: Tween, Ease, Timeline, Stagger + 6 Examples

💡Key ideas

What GSAP is, the four key words, six examples built without code (click pop, eases, timeline, loop, mouse move, split-text scroll) and how the same ideas look in code.

GSAP is the engine

GreenSock Animation Platform, a JavaScript library. Webflow acquired it, made it free, and the Interactions panel is powered by it.

Four words

Tween: one animation A→B. Ease: how it feels. Timeline: many tweens in order. Stagger: the same tween on many elements, one after another.

Panel vs code

The Interactions panel is the steering wheel; custom code is opening the bonnet. Writing GSAP code on a Webflow site needs a paid site plan.

Overlap makes it smooth

Start the next step a little before the previous one ends ("-=0.3"), like getting the milk ready before the water boils.

🚗

REAL-WORLD EXAMPLEA car: GSAP is the engine, the Interactions panel is the steering wheel and pedals. You can drive without touching the engine. Custom code is opening the bonnet and tuning it yourself.

⏱️Chapters

Click a chapter to jump to that moment in the video.

📋Step-by-step

Tick each step as you build it in your own site. Your ticks are saved.

The six examples (no code)

Click pop: View Menu button → Click → preset Pop in → type From, scale 0.8 (not 0), ease Overshoot. Eases: curve icon next to Ease shows every GSAP ease with a live graph. Overshoot for buttons; Elastic is fun but too much. Timeline: Hero intro → + Slide in up on custom selector .hero p (start 0.8s) → Pop in on .hero .button-primary (start 1.1s, overlapping the subtitle). Loop: cup (class hero-cup) → Page load → To, Move Y -14px, 1.2s, ease in out → Repeat Infinite + Yoyo. Mouse move: hero section → Mouse move, Smooth 400ms → Mouse X timeline → hero-cup From-To, Move X -60 → 60px. Letters on scroll: Our Story heading → Scroll → opacity from 0, Y from 40 → Split text Letter → stagger Total time 60%, From Center → manual end at heading center / 60% of screen.

⚙️From · To · From-To

Type	Meaning	Example
From	Start from these values, come back to normal	Pop in: scale from 0.8
To	Go to these values	Float: Y to -14px
From-To	Set both start and end	Mouse X: -60 → 60px

The same ideas in GSAP code (paid site plan)

// to / from / fromTo
gsap.to(".cup",  { y: -20 });
gsap.from("h1",   { y: 40, opacity: 0 });
gsap.fromTo(".btn", { scale: 0.8 }, { scale: 1, ease: "back.out" });

// timeline with overlap
const tl = gsap.timeline();
tl.from("h1",   { y: 40, opacity: 0 })
  .from("p",    { y: 30, opacity: 0 }, "-=0.3")
  .from(".btn", { scale: 0 });

// stagger + ScrollTrigger
gsap.from(".menu-card", {
  y: 60, opacity: 0, stagger: 0.15,
  scrollTrigger: { trigger: ".menu-list", start: "top 80%" }
});

⚠️Common mistakes

✕Scale from 0 on a button: too much. Use 0.8 for a friendly pop.

✕Several infinite loops on one page: it feels busy. One or two gentle loops only.

✕Targeting the wrong element in a timeline. Use Custom selector (e.g. .hero p) when you need a child.

✕Writing GSAP code on the free plan: custom code needs a paid site plan.

🧠Recap & quiz

First the recap question from the video, then the quiz. Your best score is saved.

Recap: What is the difference between a tween and a timeline?

A tween is one animation from one state to another. A timeline holds many tweens and controls their order and timing.

Q1 of 5 · You want the cup to float up and down forever. Which settings?

Infinite keeps it going; yoyo brings it back every time.

Q2 of 5 · What does "-=0.3" mean in a timeline?

That overlap makes the sequence feel smooth.

Q3 of 5 · Which ease shoots past and shakes back like a rubber band?

Elastic overshoots and oscillates.

Q4 of 5 · Which type sets both the start and the end values?

From-To defines both states.

Q5 of 5 · Is GSAP free in Webflow?

Custom code, not GSAP itself, needs a paid site plan.

Your score 0 / 5 Answer all questions to save your score

🏠Homework

Do this on your own site before the next lesson.

Add a click pop with a preset.Build a timeline with an overlap.Add one gentle loop (Repeat Infinite + Yoyo).Add a split-text animation and try three different eases.

← PREVIOUS

Complete website

COMING NEXT

Build a Complete SaaS Website

❓FAQ & key terms

Is GSAP free in Webflow?

Yes. Webflow made GSAP free and the Interactions panel uses it with no code. Adding your own GSAP code needs a paid site plan.

Tween vs timeline?

A tween is one animation; a timeline holds many tweens in order.

How do I make something float forever?

Use To (e.g. Move Y -14px), Repeat Infinite and Yoyo.

TweenTimelineYoyoScrollTrigger

GSAP in Webflow: 6 Real Animation Examples

💡Key ideas

GSAP is the engine

Four words

Panel vs code

Overlap makes it smooth

⏱️Chapters

📋Step-by-step

The six examples (no code)

⚙️From · To · From-To

⚠️Common mistakes

🧠Recap & quiz

Recap: What is the difference between a tween and a timeline?

Q1 of 5 · You want the cup to float up and down forever. Which settings?

Q2 of 5 · What does "-=0.3" mean in a timeline?

Q3 of 5 · Which ease shoots past and shakes back like a rubber band?

Q4 of 5 · Which type sets both the start and the end values?

Q5 of 5 · Is GSAP free in Webflow?

🏠Homework

Complete website

Build a Complete SaaS Website

❓FAQ & key terms

Get new tutorials in your inbox 📬

Thank you for subscribing! 🎉

GSAP in Webflow: 6 Real Animation Examples

💡Key ideas

GSAP is the engine

Four words

Panel vs code

Overlap makes it smooth

⏱️Chapters

📋Step-by-step

The six examples (no code)

⚙️From · To · From-To

⚠️Common mistakes

🧠Recap & quiz

Recap: What is the difference between a tween and a timeline?

Q1 of 5 · You want the cup to float up and down forever. Which settings?

Q2 of 5 · What does "-=0.3" mean in a timeline?

Q3 of 5 · Which ease shoots past and shakes back like a rubber band?

Q4 of 5 · Which type sets both the start and the end values?

Q5 of 5 · Is GSAP free in Webflow?

🏠Homework

Complete website

Build a Complete SaaS Website

❓FAQ & key terms

We value your privacy 🍪

Cookie preferences