skills.rest
leobbaroni
leobbaroniCOMMUNITY
Explore all skills by this author →
GitHub

gsap

Implements GSAP animations including timelines, ScrollTrigger, and plugins for web interfaces.

1|Updated Jul 19, 2026
Search Tags:#timeline#react#animation#svg#gsap#scrolltrigger#web animation
One-click install
npx skills add https://github.com/leobbaroni/maestro --skill gsap-leobbaroni
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap
Source: https://github.com/leobbaroni/maestro/tree/main/skills/maestro/library/genjutsu/_jutsu/gsap
Command: npx skills add https://github.com/leobbaroni/maestro --skill gsap-leobbaroni

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap, @gsap/react, lenis, and includes references (resource) components.

What problem does it solve? Choosing and correctly implementing web animations is error-prone: developers misuse ScrollTrigger on timeline children, trigger layout reflows by animating width/height, or cause re-render loops with setState in onUpdate. This Skill provides decision criteria and correct, production-tested GSAP patterns. ## Core Features & Use Cases - Engine Selection Guidance: A comparison table deciding between CSS transitions, Framer Motion, and GSAP based on timeline, scroll-link, and stagger requirements. - Complete API References: Detailed docs for core tweens (to/from/fromTo/set), timeline position parameters, ScrollTrigger configuration, and plugins (SplitText, Flip, MorphSVG, DrawSVG, MotionPath, Observer). - Critical Mistake Prevention: Documented anti-patterns such as easing on containerAnimation, immediateRender on from() in timelines, and animating non-transform properties. - Use Case: Build a horizontal scroll section where inner panel content animates as it enters view, using containerAnimation with proper ease: "none" on the parent tween. ## Quick Start Use the gsap skill to create a scroll-triggered staggered card reveal animation for my React landing page.

Frequently Asked Questions about gsap

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a scroll-triggered animation with GSAP ScrollTrigger?▼

Register ScrollTrigger, then add a scrollTrigger config to a tween or timeline with trigger, start, end, and scrub values. Use scrub: 1 for smooth scroll-linked playback and pin: true to pin the trigger element during the animation.

When should I use GSAP instead of CSS transitions or Framer Motion?▼

Use GSAP when the animation needs sequenced timelines, scroll-driven behavior via ScrollTrigger, or distributed staggers. CSS transitions suffice for simple hover states, and Framer Motion covers basic React animations but lacks GSAP's timeline and scroll control.

How do I use GSAP in React without cleanup bugs?▼

Use the useGSAP hook from @gsap/react with a scope ref instead of useEffect with manual cleanup. It automatically reverts all tweens and ScrollTriggers created inside its scope when the component unmounts.

Why does my GSAP from() animation jump inside a timeline?▼

from() tweens have immediateRender: true by default, so the element jumps to the start values immediately, breaking sequencing. Set immediateRender: false when a from() tween follows another tween in a timeline.

Why is my GSAP animation causing layout reflow and poor performance?▼

Animating width, height, top, or left triggers layout recalculation on every frame. Animate GPU-composited transforms instead, such as x, y, scale, and rotation, or use the Flip plugin for layout transitions.

Are GSAP bonus plugins like MorphSVG and SplitText free?▼

Yes. Since GSAP 3.13 in 2025, after the Webflow acquisition, all formerly Club-only plugins including MorphSVG, DrawSVG, SplitText, and ScrollSmoother are free for all uses with no paywall.

Related Skills

Explore More Software Engineering Skills→
wubq511wubq511
6

gsap-scrolltrigger

Create scroll-linked animations and pin elements with GSAP ScrollTrigger.

Community
Advanced
alexejluftalexejluft

animating-interfaces

Implement web animations and scroll effects with GSAP in React.

Community
Intermediate
brunoolfbrunoolf

motion-principles

Defines motion design principles for UI animation timing, easing, and reduced-motion handling.

Community
Intermediate
brunoolfbrunoolf

motion-web

Implements web motion using modern CSS and Motion/Framer Motion without GSAP.

Community
Intermediate