pn-gsap

GSAP deep API

When to use

• Writing or debugging GSAP timelines, tweens, or ScrollTrigger sequences.
• Choosing the right plugin (SplitText, Flip, DrawSVG, MorphSVG, MotionPath, etc.).
• Integrating GSAP inside a framework (React / Vue / Svelte) correctly.
• Recording GSAP animations deterministically as video via a Frame Adapter (see pn-html-to-video).
• Auditing performance: GPU compositing, will-change usage, ticker frequency.

For motion role taxonomy (Reveal / Orient / Confirm / Delight), motion budgets, and prefers-reduced-motion requirements, load pn-animation alongside this skill.

Install

npm install gsap            # core + all free plugins (ScrollTrigger, Draggable, Observer, etc.)
npm install @gsap/react     # useGSAP hook for React

Club plugins (SplitText, Flip, DrawSVG, MorphSVG, MotionPath, ScrambleText, GSDevTools) require a GSAP Club or Business licence. Import from the gsap/dist/ bundle or from the npm-authenticated @gsap/ scoped package.

Core API

Tween

import { gsap } from 'gsap';

// from — animate from these values to current
gsap.from('.hero', { opacity: 0, y: 40, duration: 0.7, ease: 'power3.out' });

// to — animate from current to these values
gsap.to('.card', { scale: 1.04, duration: 0.2, ease: 'power2.out' });

// fromTo — explicit start and end (frame-accurate; preferred in video adapters)
gsap.fromTo('.title',
  { opacity: 0, y: 32 },
  { opacity: 1, y: 0, duration: 0.8, ease: 'power3.out' }
);

// set — instant (no duration); use for initial state before timeline plays
gsap.set('.nav', { opacity: 0, y: -16 });

Timeline

const tl = gsap.timeline({ defaults: { ease: 'power3.out', duration: 0.6 } });

tl.from('.hero-heading', { opacity: 0, y: 40 })
  .from('.hero-sub',     { opacity: 0, y: 24 }, '-=0.4')  // 0.4s overlap
  .from('.hero-cta',     { opacity: 0, scale: 0.9 }, '-=0.3')
  .from('.hero-image',   { opacity: 0, x: 60 }, '<');       // same start as previous

// Label-based positioning
tl.addLabel('features', 2)
  .from('.feature-card', { opacity: 0, y: 32, stagger: 0.1 }, 'features');

// Repeat and yoyo
const loop = gsap.timeline({ repeat: -1, yoyo: true });
loop.to('.pulse-dot', { scale: 1.3, duration: 0.8, ease: 'sine.inOut' });