GSAP Tutorial

gsap.from() — Animate From State

While gsap.to() animates TO a destination, gsap.from() animates FROM a starting point. It's the inverse operation—you define where the element should START, and GSAP animates it to its natural (current) state. This is incredibly useful for entrance animations where you want elements to fade in, slide in, or grow in.

The key difference: gsap.from() immediately sets the properties you define, then animates back to the element's original state. This is perfect for page-load animations where you want elements to animate into their final positions. Unlike CSS animations that require keyframes, gsap.from() is dynamic and can be triggered programmatically.

gsap.from('.demo-box', {
  duration: 1.5,
  opacity: 0,       // Start invisible
  y: -50,           // Start above
  scale: 0.5,       // Start smaller
  stagger: 0.2,     // Stagger each box by 0.2s
  ease: 'back.out'
});

A common pattern is combining gsap.from() with stagger to create that popular "staggered entrance" effect where elements animate in one after another. The stagger parameter automatically offsets the animation start time for each element, creating a cascade effect that feels natural and polished.

gsap.set() — Instant Properties

Not every animation needs motion. Sometimes you just need to instantly change properties without animation. That's where gsap.set() comes in. It's essentially gsap.to() with a duration of 0—it sets properties immediately without any transition.

Why use gsap.set() instead of just changing CSS directly? Because gsap.set() understands GSAP's property names and transforms. It handles transforms, shorts like x/y instead of left/top, and integrates seamlessly with other GSAP methods. It's particularly useful before animations start to reset element states, or in timelines to jump to specific values.

// Click button to randomize
gsap.set('.demo-box', {
  x: Math.random() * 150,
  y: Math.random() * 150,
  backgroundColor: '#' + Math.floor(Math.random()*16777215).toString(16),
  rotation: Math.random() * 360
});

// Or use it to reset before an animation
gsap.set('.box', { opacity: 0, y: -20 });
gsap.to('.box', { opacity: 1, y: 0, duration: 1 });

Think of gsap.set() as the "sniper" approach—when you need to hit a specific state instantly without any animation. It's lightweight and perfect for state management in your animations.

Stagger — Animating Groups

Want to animate multiple elements but have them start at slightly different times? That's stagger. Instead of all elements animating simultaneously, stagger offsets the start time of each element by a specified amount, creating a cascading or sequential effect. It's one of GSAP's most powerful features for creating sophisticated motion sequences.

The stagger parameter can be a simple number (the delay between each element) or a complex object with options like 'from' (start direction), 'grid' (for 2D layouts), and 'amount' (total time to spread animations across). This flexibility lets you create everything from simple cascades to complex grid animations.

// Simple stagger: 0.1s delay between each element
gsap.to('.box', {
  duration: 0.8,
  scale: 1.2,
  opacity: 1,
  stagger: 0.1
});

// Advanced stagger with configuration
gsap.to('.box', {
  duration: 0.8,
  y: -20,
  opacity: 1,
  stagger: {
    amount: 0.5,      // Spread animation over 0.5 seconds
    from: 'center',   // Start from center (or 'start', 'end', 'edges')
    grid: [4, 2]      // 4 columns, 2 rows
  }
});

Stagger is commonly used for list animations (product listings, team members), grid layouts, and creating visual interest in entrance sequences. Combined with easing, stagger creates professional-looking animations that would take complex CSS or manual timing to achieve.

Pro tip: Use small stagger values (0.05-0.15s) for subtle effects that feel sophisticated. Larger stagger values are better for longer sequences where the spacing becomes part of the visual rhythm.

ScrollTrigger — Scroll Animations

GSAP's ScrollTrigger plugin lets you tie animations to scroll position. Instead of animations playing on load or on click, they trigger when elements come into view as the user scrolls. This creates the popular "animate-on-scroll" effect that adds visual interest to long pages and keeps users engaged.

ScrollTrigger works by monitoring an element's position relative to the viewport. When that element enters a specified trigger area, GSAP plays the animation. You can even tie animation progress directly to scroll position, creating "scrubbing" effects where scrolling controls the animation timeline. This is used for parallax effects, progress indicators, and interactive scroll stories.

// Basic ScrollTrigger (must register plugin first)
gsap.registerPlugin(ScrollTrigger);

gsap.to('.box', {
  duration: 1,
  opacity: 1,
  y: -50,
  scrollTrigger: {
    trigger: '.box',          // Element to watch
    start: 'top 80%',         // When trigger top hits 80% of viewport
    end: 'top 20%',           // Animation end point
    markers: true             // Debug markers (remove for production)
  }
});

// Scrub: tie animation to scroll progress (0-3 = smoothing)
gsap.to('.box', {
  duration: 2,
  x: 500,
  scrollTrigger: {
    trigger: '.box',
    scroller: window,
    scrub: 1  // 1 = 1 second smoothing, true = instant
  }
});

ScrollTrigger is incredibly powerful but also complex—there's much more to learn about markers, pinning, multiple triggers, and scroll-driven animations. For comprehensive coverage and interactive examples, check out our ScrollTrigger guide.

Common uses include fade-in animations as users scroll past elements, parallax effects where background moves slower than foreground, and progress indicators that advance as users scroll through content. ScrollTrigger makes these effects performant by only animating when needed, not on every scroll event.