Gsap Sequencing

Once you're past basic GSAP tweens and need to orchestrate multi-step animations, this gets into timelines with labels, nested timelines, and position parameters like '-=0.5' or '<'. It covers the stuff that makes complex UI choreography actually manageable: building reusable animation modules, scrubbing timelines based on scroll or input, and syncing multiple sequences with callbacks. The position parameter cheat sheet alone is worth having around. If you're animating page transitions, staggered reveals, or anything that needs precise timing control across multiple elements, this is the reference you want. Turns spaghetti animation code into something you can reason about.

skills.sh installs: 163
GitHub stars: 9
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add bbeierle12/skill-mcp-claude --skill gsap-sequencing --agent claude-code

Installs into .claude/skills of the current project.

Files

GSAP Sequencing

Complex timelines and animation orchestration.

Quick Start

import gsap from 'gsap';

const tl = gsap.timeline();

tl.to('.box1', { x: 100, duration: 0.5 })
  .to('.box2', { y: 50, duration: 0.5 })
  .to('.box3', { rotation: 360, duration: 0.5 });

Timeline Basics

Creating Timelines

// Basic timeline
const tl = gsap.timeline();

// Timeline with defaults
const tl = gsap.timeline({
  defaults: {
    duration: 0.5,
    ease: 'power2.out'
  }
});

// Paused timeline (manual control)
const tl = gsap.timeline({ paused: true });

Sequential Animations

const tl = gsap.timeline();

// Each animation starts after the previous one ends
tl.to('.header', { y: 0, opacity: 1, duration: 0.5 })
  .to('.content', { y: 0, opacity: 1, duration: 0.5 })
  .to('.footer', { y: 0, opacity: 1, duration: 0.5 });

Position Parameters

Absolute Positioning

const tl = gsap.timeline();

tl.to('.a', { x: 100 })
  .to('.b', { x: 100 }, 0)      // Start at 0 seconds (absolute)
  .to('.c', { x: 100 }, 0.5)    // Start at 0.5 seconds
  .to('.d', { x: 100 }, 2);     // Start at 2 seconds

SKILL.md on GitHub