gsap-animation

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())