GSAP Fade + Slide In

// components/GSAP_Fade.tsx
import { useRef, useEffect } from 'react';
import gsap from 'gsap';

export const GSAP_Fade = ({ triggerKey }) => {
  const ref = useRef(null);

  useEffect(() => {
    if (!ref.current) return;
    const elements = Array.from(ref.current.children);

    // Reset initial state
    elements.forEach(el => gsap.set(el, { opacity: 0, y: 20 }));

    // Animate
    gsap.to(elements, {
      opacity: 1,
      y: 0,
      stagger: 0.15,
      duration: 0.6,
      ease: 'power2.out',
    });
  }, [triggerKey]);

  return (
    <div ref={ref} key={triggerKey}>
      <h2>Fade + Slide In</h2>
      <p>This box fades in while sliding up.</p>
      <p>Children appear sequentially thanks to the stagger.</p>
    </div>
  );
};

• gsap.to: Animates elements from initial state to final state.
• Reset state: Ensures animation works on multiple runs.
• stagger: Children animate sequentially.
• ease: Smooth easing using power2.out.
• triggerKey prop: Re-runs animation when "Run Again" is clicked.