Gsap Fundamentals

This gets you started with GSAP's core animation API without the noise. You'll learn the four tween methods (to, from, fromTo, set), how to animate transforms and CSS properties, and which easing functions to reach for when. The stagger examples are solid for animating lists and grids, and the callbacks section covers the lifecycle hooks you actually need. It's focused on fundamentals rather than advanced plugins, so you're looking at basic tweens, timing controls, and playback methods. If you're used to CSS transitions and want programmatic control with better performance, or you're building anything interactive that needs smooth motion, this is the foundation. The ease comparison table alone saves you from guessing which curve feels right.

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

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

GSAP Fundamentals

Core animation concepts with GreenSock Animation Platform.

Quick Start

npm install gsap

import gsap from 'gsap';

// Basic tween
gsap.to('.box', {
  x: 200,
  duration: 1,
  ease: 'power2.out'
});

Core Concepts

Tween Types

Method	Description	Use Case
`gsap.to()`	Animate from current → target	Most common
`gsap.from()`	Animate from target → current	Entrance animations
`gsap.fromTo()`	Animate from defined start → end	Full control
`gsap.set()`	Instantly set properties	Initial state

Basic Tweens

// To: current state → target
gsap.to('.element', {
  x: 100,
  y: 50,
  rotation: 360,
  duration: 1
});

// From: target → current state
gsap.from('.element', {
  opacity: 0,
  y: -50,
  duration: 0.5
});

// FromTo: explicit start and end
gsap.fromTo('.element',
  { opacity: 0, scale: 0.5 },  // from
  { opacity: 1, scale: 1, duration: 1 }  // to
);

// Set: instant property change
gsap.set('.element', { visibility: 'visible', opacity: 0 });