Gsap

Skill nota-america/forgecat-agent-profiles/profiles/mengto/skills/mango_skills_agent-skills-web-design/for-forgecat/skills/gsap

Production-ready AI agent profiles for Claude Code, Cursor, and Codex. Search, install, and contribute ForgeCat packages.

Install

npx -y skills add nota-america/forgecat-agent-profiles --skill gsap

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

24 stars24 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Use when you need to add or debug professional web animations with GSAP (timelines, ScrollTrigger, stagger, transforms) in HTML/CSS/JS/React. Includes patterns for smooth motion, performance, and common pitfalls.

SKILL.md

3.0 KB, as published. Nobody here has run it

GSAP (GreenSock) — Web Animation Skill

When to use

High-quality UI/motion design: entrances, micro-interactions, page transitions
Timeline-based sequences (vs. scattered CSS transitions)
Scroll-driven storytelling (with ScrollTrigger)
Complex easing, staggering, orchestration across many elements

Key concepts & APIs

Tweens:
- gsap.to(targets, vars)
- gsap.from(targets, vars)
- gsap.fromTo(targets, fromVars, toVars)
Timelines:
- const tl = gsap.timeline({ defaults, repeat, yoyo, paused })
- Chain: tl.to(...).from(...).addLabel('x').add(() => ...)
- Position parameter: absolute 1.2, relative "+=0.5", overlap "-=0.3", label "intro"
Eases: ease: "power2.out", "expo.inOut", "elastic.out(1, 0.3)"
Staggers: stagger: 0.05 or { each, from: "start|center|end|random", grid }
Performance-friendly properties:
- Prefer transforms (x, y, scale, rotation) and opacity (autoAlpha)
ScrollTrigger (plugin):
- gsap.registerPlugin(ScrollTrigger)
- Inline: gsap.to(".box", { scrollTrigger: ".box", x: 500 })
- Advanced: scrollTrigger: { trigger, start, end, scrub, pin, snap, markers }
- Standalone: ScrollTrigger.create({ trigger, start, end, onUpdate, onToggle })

Common pitfalls (and fixes)

Animating layout properties (top/left/width/height) → jank
- Use transforms, add will-change: transform, avoid forced reflow.
ScrollTrigger “not firing” due to wrong trigger sizing/overflow containers
- Ensure trigger exists, has height, and check scroll container (nested scrolling needs config).
Not cleaning up in SPA/React
- Use gsap.context() and revert on unmount; kill triggers (ScrollTrigger.getAll().forEach(t => t.kill())) if needed.
FOUC / measuring before fonts/images load
- Initialize after layout is stable; run ScrollTrigger.refresh() after images load.

Quick recipes

1) Hero entrance (stagger)

gsap.from(".hero [data-anim]", {
  y: 24,
  autoAlpha: 0,
  duration: 0.8,
  ease: "power2.out",
  stagger: 0.06,
});

2) Sequenced timeline

const tl = gsap.timeline({ defaults: { ease: "power2.out", duration: 0.6 } });
tl.from(".nav", { y: -20, autoAlpha: 0 })
  .from(".hero-title", { y: 30, autoAlpha: 0 }, "-=0.2")
  .from(".hero-cta", { scale: 0.95, autoAlpha: 0 }, "-=0.2");

3) Scroll-scrub pinned section

gsap.registerPlugin(ScrollTrigger);

gsap.timeline({
  scrollTrigger: {
    trigger: ".story",
    start: "top top",
    end: "+=800",
    scrub: 1,
    pin: true,
  },
}).to(".story .panel", { xPercent: -200 });

What to ask the user (if requirements unclear)

Is this a static site or SPA (React/Next/Vue)? Any page transitions?
Do we need scroll-driven sections (pin/scrub/snap)?
Performance constraints (mobile support, reduced motion)?