GSAP ClipPath Reveal

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

export const GSAP_Clip = () => {
  const ref = useRef<HTMLDivElement | null>(null);
  
  useEffect(() => {
    if (!ref.current) return;
    gsap.fromTo(
      ref.current,
      { clipPath: 'inset(0% 100% 0% 0%)' },
      { clipPath: 'inset(0% 0% 0% 0%)', duration: 1.2, ease: 'power2.out' }
    );
  }, []);

  return (
    <div
      ref={ref}
      className="p-8 bg-gradient-to-r from-pink-300 to-indigo-400 rounded-xl text-white text-lg"
    >
      Clip reveal
    </div>
  );
};

• clip-path: Defines which part of an element is visible. Here, we animate it from a right-side crop to fully visible.
• fromTo: Starts the animation from inset(0% 100% 0% 0%)(fully hidden) to inset(0% 0% 0% 0%) (fully revealed).
• ease: Adds smooth acceleration/deceleration using power2.out.
• duration: Controls the reveal speed — here 1.2 seconds.