Fade SlideScrollTrigger RevealTimelineMotion PathShape MorphingCursor FollowPinningClipPathSVG StrokeComplex Sequence

GSAP ScrollTrigger — Pinned Section

ScrollTrigger: Pinned Section Preview

Scroll down to trigger the pinned section 👇

Pinned Section

This section stays fixed while you scroll for a while. Great for storytelling or emphasizing visuals.

Scroll down to see the effect ⬇️

You’ve scrolled past the pinned section 👆

Code Snippet


// components/GSAP_Pinning.tsx
import { useEffect, useRef } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

export const GSAP_Pinning = () => {
  const ref = useRef<HTMLDivElement | null>(null);
  useEffect(() => {
    if (!ref.current) return;
    const st = ScrollTrigger.create({
      trigger: ref.current,
      start: "top top",
      end: "+=600",
      pin: true,
      scrub: true,
    });
    return () => st.kill();
  }, []);
  return (
    <div ref={ref} className="h-[100vh] flex justify-center items-center bg-gradient-to-b from-blue-600 to-purple-800 text-white">
      <h2>Pinned content</h2>
    </div>
  );
};

Explanation

  • ScrollTrigger.create: Defines the scroll-based animation behavior.
  • pin: Keeps the section fixed while the user scrolls within a defined range.
  • scrub: Syncs animation progress with scroll position.
  • start/end: Controls when the pinning starts and ends (start: 'top top', end: '+=600').