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

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 });

Animation Properties

Transform Properties

gsap.to('.element', {
  // Position
  x: 100,           // translateX in pixels
  y: 50,            // translateY in pixels
  xPercent: 50,     // translateX as percentage of element width
  yPercent: -100,   // translateY as percentage of element height

  // Rotation
  rotation: 360,    // 2D rotation in degrees
  rotationX: 45,    // 3D rotation around X axis
  rotationY: 45,    // 3D rotation around Y axis

  // Scale
  scale: 1.5,       // Uniform scale
  scaleX: 2,        // Horizontal scale
  scaleY: 0.5,      // Vertical scale

  // Skew
  skewX: 20,        // Horizontal skew in degrees
  skewY: 10,        // Vertical skew in degrees

  // Transform origin
  transformOrigin: 'center center',
  transformPerspective: 500,

  duration: 1
});

CSS Properties

gsap.to('.element', {
  // Colors
  color: '#00F5FF',
  backgroundColor: '#FF00FF',
  borderColor: 'rgba(255, 215, 0, 0.5)',

  // Dimensions
  width: 200,
  height: '50%',
  padding: 20,
  margin: '10px 20px',

  // Display
  opacity: 0.8,
  visibility: 'visible',
  display: 'block',

  // Border
  borderRadius: '50%',
  borderWidth: 2,

  // Shadow
  boxShadow: '0 0 20px rgba(0, 245, 255, 0.5)',

  duration: 1
});

SVG Properties

gsap.to('svg path', {
  // Path morphing (requires MorphSVGPlugin)
  morphSVG: '#targetPath',

  // Draw SVG
  strokeDashoffset: 0,
  drawSVG: '100%',

  // SVG attributes
  attr: {
    cx: 100,
    cy: 100,
    r: 50,
    fill: '#00F5FF'
  },

  duration: 2
});

Timing Controls

Duration and Delay

gsap.to('.element', {
  x: 100,
  duration: 1,      // Animation length in seconds
  delay: 0.5,       // Wait before starting
  repeat: 3,        // Repeat 3 times (4 total plays)
  repeatDelay: 0.2, // Pause between repeats
  yoyo: true        // Reverse on alternate repeats
});

Infinite Repeat

gsap.to('.spinner', {
  rotation: 360,
  duration: 1,
  repeat: -1,       // Infinite repeat
  ease: 'none'      // Linear for constant speed
});

Stagger

// Animate multiple elements with offset timing
gsap.to('.card', {
  y: 0<