Gsap Animation

This bridges GSAP's professional animation toolkit with Remotion's frame-based rendering through a clever hook that seeks a paused timeline to match the current frame. You get SplitText for character-level reveals with mask wrapping, MorphSVG for shape tweening, DrawSVG for stroke animations, and advanced easing curves like CustomBounce. The skill includes a font-loading variant of the hook since SplitText needs accurate measurements, plus patterns for highlight boxes behind specific words and ScrambleText decode effects. All GSAP plugins are now free after Webflow's acquisition. Use this when Remotion's interpolate() and spring() aren't enough for complex timeline orchestration or when you need staggered animations with grid distribution. The determinism warning about ScrambleText is worth noting if you need pixel-perfect reproducibility.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 9
skills.sh installs: 333
GitHub stars: 340
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add notedit/happy-skills --skill gsap-animation --agent claude-code

Installs into .claude/skills of the current project.

Files

When to use

Use this skill when creating Remotion video compositions that need GSAP's advanced animation capabilities beyond Remotion's built-in interpolate() and spring().

Use GSAP when you need:

Complex timeline orchestration (nesting, labels, position parameters like "-=0.5")
Text splitting animation (SplitText: chars/words/lines with mask reveals)
SVG shape morphing (MorphSVG), stroke drawing (DrawSVG), path-following (MotionPath)
Advanced easing (CustomEase from SVG paths, RoughEase, SlowMo, CustomBounce, CustomWiggle)
Stagger with grid, center/edges distribution
Character scramble/decode effects (ScrambleText)
Reusable named effects via gsap.registerEffect()

Use Remotion native interpolate() when:

Simple single-property animations (fade, slide, scale) -- do NOT use GSAP for these
Numeric counters/progress bars -- pure math, no timeline needed
Standard easing curves
Spring physics (spring())

GSAP Licensing: All plugins are 100% free since Webflow's 2024 acquisition (SplitText, MorphSVG, DrawSVG, etc.).

Setup

# In a Remotion project
npm install gsap

SKILL.md on GitHub

Details

Repository: github.com/notedit/happy-skills
Categories: Automation & Workflows, Design & UI/UX, Generative Media
First seen: Jun 3, 2026

More from notedit/happy-skills

All 3