Let's Talk

Four GSAP ScrollTrigger patterns I use on every client site

· 2 min read
GSAPAnimationScroll

GSAP is easy to abuse. Every junior dev who discovers ScrollTrigger starts pinning sections, parallaxing everything, and shipping 3MB of motion that nobody asked for.

Here are four patterns that consistently earn their place on client sites.

1. Staggered reveal on scroll-into-view

The boring one. The workhorse. 90% of the “wow, this site feels polished” reaction comes from this single pattern done right.

gsap.from('[data-reveal] > *', {
  opacity: 0,
  y: 40,
  duration: 0.8,
  stagger: 0.1,
  ease: 'power3.out',
  scrollTrigger: {
    trigger: '[data-reveal]',
    start: 'top 80%',
    toggleActions: 'play none none reverse',
  },
});

Caveat: keep the Y offset small (30–50px) and the duration short (0.6–0.9s). Any more and it feels sluggish on long pages.

2. Counter animation

Animates a number from 0 to its target when it enters the viewport. Works wonders on stat sections.

const counter = { v: 0 };
gsap.to(counter, {
  v: 150,
  duration: 2,
  ease: 'power2.out',
  onUpdate: () => el.textContent = Math.round(counter.v) + '+',
  scrollTrigger: { trigger: el, start: 'top 85%' },
});

Caveat: don’t do this for numbers bigger than 10,000 — the animation reads as lag, not craft.

3. Horizontal pin-scroll sections

The “scroll down to scroll sideways” effect. Beloved by agencies. Appropriate for maybe one section per site.

gsap.to('.panel-track', {
  xPercent: -100 * (panels.length - 1),
  ease: 'none',
  scrollTrigger: {
    trigger: '.panel-track',
    pin: true,
    scrub: 1,
    end: () => '+=' + window.innerWidth * (panels.length - 1),
  },
});

Caveat: brutal on mobile. Always check you have a non-horizontal fallback under 768px.

4. Parallax without performance death

The trick is yPercent with scrub, not y with CSS transforms triggered on scroll events.

gsap.to('[data-parallax]', {
  yPercent: -30,
  ease: 'none',
  scrollTrigger: {
    trigger: '[data-parallax]',
    start: 'top bottom',
    end: 'bottom top',
    scrub: 1,
  },
});

Caveat: never parallax text. Visual content only. Parallaxed text is unreadable and screen readers hate it.

If I could only keep one pattern, it would be (1). It’s 80% of the perceived polish on a client site for 10% of the effort.

All articles