Gsap Scrolltrigger

This is your go-to for everything GSAP and ScrollTrigger. It covers the fundamentals like tweens, timelines, and position parameters, then gets into scroll-driven patterns: pinning sections, parallax effects, horizontal scrolling, and batch animations with stagger. You'll find working examples for syncing animations to scrollbar position with scrub, controlling timing with toggleActions, and integrating with Three.js or WebGL scenes. The skill really shines when you need to build modern scroll-based storytelling experiences or just want smooth UI transitions without fighting the documentation. Includes practical snippets for snap points, labels, and common gotchas around start/end positioning.

skills.sh installs: 3.1K
GitHub stars: 1.3K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add freshtechbro/claudedesignskills --skill gsap-scrolltrigger --agent claude-code

Installs into .claude/skills of the current project.

Files

GSAP & ScrollTrigger Development

Overview

GSAP (GreenSock Animation Platform) is the industry-leading JavaScript animation library for creating high-performance, production-quality animations. ScrollTrigger is GSAP's powerful plugin for scroll-driven animations. Together, they enable everything from simple UI transitions to complex scroll-based storytelling experiences.

Core Concepts

The Basics: Tweens

A tween is a single animation from point A to point B.

// Animate TO a state (from current)
gsap.to(".box", {
  x: 200,
  rotation: 360,
  duration: 1,
  ease: "power2.inOut"
});

// Animate FROM a state (to current)
gsap.from(".box", {
  opacity: 0,
  y: -50,
  duration: 0.8
});

// Animate FROM-TO (define both start and end)
gsap.fromTo(".box",
  { opacity: 0, scale: 0.5 }, // FROM
  { opacity: 1, scale: 1, duration: 1 } // TO
);

Timelines: Sequencing Animations

Timelines orchestrate multiple tweens in sequence or overlap.

const tl = gsap.timeline();

// Sequential by default
tl.to(".box1", { x: 100, duration: 1 })
  .to(".box2", { y: 100, duration: 1 })
  .to(".box3", { rotation: 360, duration: 1 });

SKILL.md on GitHub