Flip Reveal

1"use client";
2 
3import { ComponentProps, useRef } from "react";
4 
5import { useGSAP } from "@gsap/react";
6import gsap from "gsap";
7import Flip from "gsap/Flip";
8 
9gsap.registerPlugin(Flip);
10 
11type FlipRevealItemProps = {
12    flipKey: string;
13} & ComponentProps<"div">;
14 
15export const FlipRevealItem = ({ flipKey, ...props }: FlipRevealItemProps) => {
16    return <div data-flip={flipKey} {...props} />;
17};
18 
19type FlipRevealProps = {
20    keys: string[];
21    showClass?: string;
22    hideClass?: string;
23} & ComponentProps<"div">;
24 
25export const FlipReveal = ({ keys, hideClass = "", showClass = "", ...props }: FlipRevealProps) => {
26    const wrapperRef = useRef<HTMLDivElement | null>(null);
27 
28    const isShow = (key: string | null) => !!key && (keys.includes("all") || keys.includes(key));
29 
30    useGSAP(
31        () => {
32            if (!wrapperRef.current) return;
33 
34            const items = gsap.utils.toArray<HTMLDivElement>(["[data-flip]"]);
35            const state = Flip.getState(items);
36 
37            items.forEach((item) => {
38                const key = item.getAttribute("data-flip");
39                if (isShow(key)) {
40                    item.classList.add(showClass);
41                    item.classList.remove(hideClass);
42                } else {
43                    item.classList.remove(showClass);
44                    item.classList.add(hideClass);
45                }
46            });
47 
48            Flip.from(state, {
49                duration: 0.6,
50                scale: true,
51                ease: "power1.inOut",
52                stagger: 0.05,
53                absolute: true,
54                onEnter: (elements) =>
55                    gsap.fromTo(
56                        elements,
57                        { opacity: 0, scale: 0 },
58                        {
59                            opacity: 1,
60                            scale: 1,
61                            duration: 0.8,
62                        },
63                    ),
64                onLeave: (elements) => gsap.to(elements, { opacity: 0, scale: 0, duration: 0.8 }),
65            });
66        },
67 
68        { scope: wrapperRef, dependencies: [keys] },
69    );
70 
71    return <div {...props} ref={wrapperRef} />;
72};