GSAP Plugin Lab

8 of these 10 recipes use plugins that cost money until April 2025, when Webflow made GSAP free for everyone — SplitText, MorphSVG, DrawSVG, ScrambleText, Physics2D, Inertia, Flip and ScrollTrigger all ship in the public npm package now. Every parameter below is live, and the panel emits the actual GSAP call rather than a component.

Every Club plugin is free now

This one is driven by pointer or scroll input rather than a timeline, so there is nothing to scrub — interact with the preview directly.

Split Text

SplitText

Splits a block of text into per-character, per-word or per-line elements you can stagger independently, then puts the DOM back exactly as it was on revert. Handles nested markup and keeps the original text available to screen readers.

const split = SplitText.create(headline, { type: "chars" });

gsap.from(split.chars, {
  duration: 0.8,
  y: 60,
  rotationX: -80,
  scale: 1,
  opacity: 0,
  transformOrigin: "50% 50% -60px",
  ease: "back.out(1.7)",
  stagger: { each: 0.03, from: "start" },
});

Split by

Granularity of the split. Lines need the text to wrap.

Duration

Length of each piece’s tween, in seconds.

0.053.00

Stagger

Delay between consecutive pieces, in seconds.

0.0000.300

Y offset

How far each piece starts below its resting place, in pixels.

-200200

Rotation X

Degrees of 3D tilt each piece starts at.

-180180

Start scale

Scale each piece animates up from.

0.003.00

Stagger from

Which piece the stagger radiates out from.

Ease

Any string gsap.parseEase accepts.