gsap-sequencing

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

Relative Positioning

const tl = gsap.timeline();

tl.to('.a', { x: 100, duration: 1 })
  .to('.b', { x: 100 }, '-=0.5')   // Start 0.5s before previous ends
  .to('.c', { x: 100 }, '+=0.5')   // Start 0.5s after previous ends
  .to('.d', { x: 100 }, '<')       // Start when previous starts
  .to('.e', { x: 100 }, '>')       // Start when previous ends (default)
  .to('.f', { x: 100 }, '<0.2')    // Start 0.2s after previous starts
  .to('.g', { x: 100 }, '>-0.2');  // Start 0.2s before previous ends

Position Parameter Cheat Sheet

Parameter	Meaning
0	At 0 seconds (absolute)
2	At 2 seconds (absolute)
'+=0.5'	0.5s after previous end
'-=0.5'	0.5s before previous end
'<'	When previous starts
'>'	When previous ends
'<0.3'	0.3s after previous starts
'>-0.3'	0.3s before previous ends
'myLabel'	At label position
'myLabel+=0.5'	0.5s after label