间隔动画

// npm install gsap
"use client";

import { useLayoutEffect, useRef } from "react";
import gsap from "gsap";
import { SplitText } from "gsap/SplitText";

gsap.registerPlugin(SplitText);

export default function Page() {
    const el = useRef<HTMLHeadingElement>(null);
    useLayoutEffect(() => {
        const split = SplitText.create(el.current, { type: "chars" });
        gsap.from(split.chars, {
            yPercent: 120,
            stagger: 0.035,
            ease: "back.out(1.6)",
        });
        return () => split.revert();
    }, []);
    return (
        <div className="flex min-h-screen items-center justify-center">
            <h1 ref={el} className="overflow-hidden text-5xl font-bold">
                Animations you can steal.
            </h1>
        </div>
    );
}