Stagger on Scroll

1"use client";
2 
3import { ComponentProps, useRef } from "react";
4 
5import { useGSAP } from "@gsap/react";
6import gsap from "gsap";
7import { ScrollTrigger } from "gsap/ScrollTrigger";
8 
9gsap.registerPlugin(ScrollTrigger);
10 
11type EffectType = "scale" | "slideInRight" | "blur" | "random";
12 
13type StaggerOnScrollProps = {
14    effect?: EffectType;
15} & ComponentProps<"div">;
16 
17export const StaggerOnScroll = ({ effect = "scale", ...props }: StaggerOnScrollProps) => {
18    const wrapperRef = useRef<HTMLDivElement | null>(null);
19 
20    useGSAP(
21        () => {
22            if (!wrapperRef.current || !wrapperRef.current.children.length) return;
23 
24            const animationPresets: Record<EffectType, gsap.TweenVars> = {
25                scale: {
26                    opacity: 0,
27                    scale: 0.9,
28                    duration: 0.8,
29                    stagger: 0.15,
30                    ease: "power2.out",
31                },
32                slideInRight: {
33                    opacity: 0,
34                    x: 80,
35                    duration: 1,
36                    stagger: 0.1,
37                    ease: "back.out(1.4)",
38                },
39                blur: {
40                    opacity: 0,
41                    filter: "blur(10px)",
42                    duration: 0.8,
43                    stagger: 0.12,
44                    ease: "power2.out",
45                },
46 
47                random: {
48                    opacity: 0,
49                    x: () => gsap.utils.random(-100, 100),
50                    y: () => gsap.utils.random(-100, 100),
51                    duration: 0.9,
52                    stagger: 0.1,
53                    ease: "power2.out",
54                },
55            };
56 
57            gsap.from(wrapperRef.current.children, {
58                ...animationPresets[effect],
59                scrollTrigger: {
60                    trigger: wrapperRef.current,
61                    start: "top 85%",
62                },
63            });
64        },
65        { scope: wrapperRef, dependencies: [effect] },
66    );
67 
68    return <div {...props} ref={wrapperRef} />;
69};