The Complete Production SOP: How to Deploy and Run GSAP ScrollTrigger Complex Parallax Timelines in Autonomous AI Agents

---
name: "gsap-scrolltrigger-timelines"
description: "Create synchronized, scrubbed scroll animations and pinned sections with GSAP ScrollTrigger."
metadata:
  author: "GreenSock"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "create gsap scrolltrigger timeline"
  - "pin section on scroll gsap"
  - "smooth parallax animation gsap"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

import React, { useLayoutEffect, useRef } from 'react';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

export const ParallaxSection: React.FC = () => {
  const mainRef = useRef<HTMLDivElement | null>(null);

  useLayoutEffect(() => {
    const ctx = gsap.context(() => {
      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: mainRef.current,
          start: 'top top',
          end: '+=1500',
          scrub: 1.2,
          pin: true,
          anticipatePin: 1,
        },
      });

      tl.to('.parallax-layer-back', { yPercent: 40, ease: 'none' }, 0)
        .to('.parallax-layer-mid', { yPercent: -20, ease: 'none' }, 0)
        .fromTo('.parallax-layer-front', { scale: 0.8 }, { scale: 1.1, ease: 'power1.out' }, 0);
    }, mainRef);

    return () => ctx.revert();
  }, []);

  return (
    <div ref={mainRef} className="relative h-screen overflow-hidden">
      <div className="parallax-layer-back absolute inset-0 bg-blue-900" />
      <div className="parallax-layer-mid absolute inset-0 flex items-center justify-center">
        <h2 className="text-white text-5xl font-bold">Parallax Depth</h2>
      </div>
      <div className="parallax-layer-front absolute bottom-10 left-10 text-white">
        Foreground Elements
      </div>
    </div>
  );
};

Create a gsap scrolltrigger timeline for the horizontal case-study showcase. Pin section on scroll gsap, use scrub: 1 with anticipatePin: 1, and ensure clean unmounting using gsap.context().

import { describe, it, expect, vi } from 'vitest';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

describe('GSAP ScrollTrigger Context Verification', () => {
  it('should clean up triggers when ctx.revert() is executed', () => {
    gsap.registerPlugin(ScrollTrigger);
    const revertSpy = vi.fn();
    const ctx = gsap.context(() => {
      ScrollTrigger.create({ trigger: document.body });
    });
    ctx.add('revertTrigger', revertSpy);
    expect(ScrollTrigger.getAll().length).toBeGreaterThan(0);
    ctx.revert();
    expect(ScrollTrigger.getAll().length).toBe(0);
  });
});