时间线

// npm install gsap
"use client";

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

export default function Page() {
    const scope = useRef<HTMLDivElement>(null);
    useLayoutEffect(() => {
        const ctx = gsap.context(() => {
            gsap
                .timeline()
                .from(".box", { x: -60, opacity: 0, stagger: 0.12, ease: "power3.out" })
                .to(".box", { rotation: 90, stagger: 0.12 })
                .to(".box", { scale: 0.6, yoyo: true, repeat: 1, stagger: 0.08 });
        }, scope);
        return () => ctx.revert();
    }, []);
    return (
        <div ref={scope} className="flex min-h-screen items-center justify-center gap-4">
            {[0, 1, 2].map((i) => (
                <div key={i} className="box size-12 bg-amber-400" />
            ))}
        </div>
    );
}