GSAP ScrollTrigger Reveal

// GSAP ScrollTrigger Reveal Example
import { useEffect, useRef } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

export const GSAP_ScrollReveal = () => {
  const containerRef = useRef(null);
  useEffect(() => {
    const container = containerRef.current;
    const revealElements = gsap.utils.toArray(".reveal", container);
    const triggers = [];
    revealElements.forEach(el => {
      triggers.push(gsap.from(el, {
        y: 60,
        opacity: 0,
        duration: 0.8,
        scrollTrigger: {
          trigger: el,
          start: "top 80%",
          toggleActions: "play none none reverse"
        }
      }).scrollTrigger);
    });
    return () => triggers.forEach(t => t.kill());
  }, []);
  return <div ref={containerRef}>{/* ...reveal items */}</div>;
};

• ScrollTrigger: Ties animation to scroll position.
• start: Animation triggers when element top hits 80% of viewport.
• toggleActions: Play on enter, reverse on leave.
• gsap.from: Animates from opacity 0 and y 60 to default.
• Multiple elements: Add className="reveal" to each element.
• Click "Run Again" to rerun animations dynamically.