GSAP Timeline Animation (Bigger & Better)

// GSAP Timeline Component (Scoped)
import { useRef, useEffect } from "react";
import gsap from "gsap";

export const GSAP_Timeline = () => {
  const ref = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (!ref.current) return;
    const ctx = gsap.context(() => {
      const tl = gsap.timeline({ defaults: { duration: 0.6, ease: "power2.out" } });

      tl.from(".title", { y: -40, opacity: 0, scale: 0.8 })
        .from(".card", { y: 50, opacity: 0, scale: 0.9, stagger: 0.15 }, "-=0.3")
        .to(".highlight", { scale: 1.15, repeat: 1, yoyo: true, duration: 0.5 }, "+=0.3");

      return () => tl.kill();
    }, ref);

    return () => ctx.revert();
  }, []);

  return (
    <div ref={ref}>
      <h3 className="title">Timeline Animation</h3>
      <div className="card">A</div>
      <div className="card">B</div>
      <div className="card">C</div>
      <div className="highlight">PULSE</div>
    </div>
  );
};

• gsap.context: Scopes animation to this component to allow remount reruns.
• tl.from('.title'): Slides title in from top with scale.
• tl.from('.card'): Cards animate sequentially using stagger.
• tl.to('.highlight'): Pulses the highlight box.
• ctx.revert(): Cleans up animation on unmount or rerun.