Reveal 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 = "fadeIn" | "slideInRight" | "zoomIn" | "blurIn";
12type RevealOnScrollProps = {
13    effect?: EffectType;
14    scrollTriggerVars?: ScrollTrigger.Vars;
15    fromVars?: gsap.TweenVars;
16    toVars?: gsap.TweenVars;
17} & ComponentProps<"div">;
18 
19export const RevealOnScroll = ({
20    effect = "fadeIn",
21    scrollTriggerVars,
22    fromVars,
23    toVars,
24    ...props
25}: RevealOnScrollProps) => {
26    const wrapperRef = useRef<HTMLDivElement | null>(null);
27    const animationRef = useRef<gsap.core.Tween | null>(null);
28 
29    useGSAP(
30        () => {
31            const el = wrapperRef.current;
32            if (!el) return;
33 
34            // Cleanup previous animation
35            animationRef.current?.scrollTrigger?.kill();
36            animationRef.current?.kill();
37            gsap.set(el, { clearProps: "all" });
38 
39            const scrollTrigger: ScrollTrigger.Vars = {
40                trigger: el,
41                start: "top 80%",
42                toggleActions: "play pause play reverse",
43                ...scrollTriggerVars,
44            };
45 
46            const presets: Record<EffectType, { from: gsap.TweenVars; to: gsap.TweenVars }> = {
47                fadeIn: {
48                    from: { opacity: 0, y: 50 },
49                    to: { opacity: 1, y: 0, duration: 1 },
50                },
51                slideInRight: {
52                    from: { x: 100, opacity: 0 },
53                    to: { x: 0, opacity: 1, duration: 1 },
54                },
55                zoomIn: {
56                    from: { scale: 0.8, opacity: 0 },
57                    to: { scale: 1, opacity: 1, duration: 1 },
58                },
59                blurIn: {
60                    from: { y: 30, opacity: 0, filter: "blur(10px)" },
61                    to: { y: 0, opacity: 1, filter: "blur(0px)", duration: 1 },
62                },
63            };
64 
65            const preset = presets[effect] || presets.fadeIn;
66            const fromVarsFinal = { ...preset.from, ...fromVars };
67            const toVarsFinal = { ...preset.to, scrollTrigger, ...toVars };
68 
69            animationRef.current = gsap.fromTo(el, fromVarsFinal, toVarsFinal);
70 
71            return () => {
72                animationRef.current?.scrollTrigger?.kill();
73                animationRef.current?.kill();
74            };
75        },
76// … truncated