Swap

1import { ComponentProps, ReactNode, useMemo, useRef, useState } from "react";
2 
3import { useGSAP } from "@gsap/react";
4import gsap from "gsap";
5 
6const effectPresets = {
7    slideUp: [
8        {
9            y: "-100%",
10        },
11        {
12            y: "100%",
13        },
14        {
15            y: 0,
16        },
17    ],
18    slideDown: [
19        {
20            y: "100%",
21        },
22        {
23            y: "-100%",
24        },
25        {
26            y: 0,
27        },
28    ],
29    opacity: [
30        {
31            opacity: 0,
32        },
33        {
34            opacity: 0,
35        },
36        {
37            opacity: 1,
38        },
39    ],
40    blur: [
41        {
42            filter: "blur(12px)",
43        },
44        {
45            filter: "blur(12px)",
46        },
47        {
48            filter: "blur(0px)",
49        },
50    ],
51    grayscale: [
52        {
53            filter: "grayscale(100%)",
54        },
55        {
56            filter: "grayscale(100%)",
57        },
58        {
59            filter: "grayscale(0%)",
60        },
61    ],
62} as const;
63 
64export type SwapProps<T = object> = Omit<ComponentProps<"div">, "children"> & {
65    state: T;
66    children: (state: T) => ReactNode;
67    effects?: (keyof typeof effectPresets)[];
68    duration?: number;
69};
70 
71const mergeVars = (varsArray: Record<string, string | number>[]) => {
72    const merged: Record<string, string | number> = {};
73 
74    for (const vars of varsArray) {
75        for (const [key, value] of Object.entries(vars)) {
76            if (key === "filter" && merged.filter) {
77                merged.filter += ` ${value}`; // combine filters
78            } else {
79                merged[key] = value; // last one wins for other props
80            }
81        }
82    }
83 
84    return merged;
85};
86 
87export const Swap = <T,>({ state, children, duration = 0.4, effects = [], ...props }: SwapProps<T>) => {
88    const [currentState, setCurrentState] = useState(state);
89 
90    const containerRef = useRef<HTMLDivElement>(null);
91    const contentRef = useRef<HTMLDivElement>(null);
92 
93    const [enterVars, exitVars, finalVars] = useMemo(
94        () => Array.from({ length: 3 }, (_, i) => mergeVars(effects.map((e) => effectPresets[e][i]))),
95        [effects],
96    );
97 
98    useGSAP(
99        () => {
100            if (currentState === state) return;
101            const content = contentRef.current;
102            if (!content) return;
103 
104            gsap.to(content, {
105                ...enterVars,
106                duration,
107                ease: "power2.in",
108                onComplete: () => {
109// … truncated