Reveal Animation With Gsap

'use client';
import React, { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

// Register ScrollTrigger plugin
gsap.registerPlugin(ScrollTrigger);

interface FadeInOnViewProps {
  children: React.ReactNode;
  delay?: number;
  duration?: number;
  stagger?: number;
}

export const FadeInOnView: React.FC<FadeInOnViewProps> = ({
  children,
  delay = 0,
  duration = 1.2,
  stagger = 0.2,
}) => {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    const elements = containerRef.current.children;

    gsap.set(elements, { opacity: 0, y: 20 });

    gsap.to(elements, {
      opacity: 1,
      y: 0,
      duration,
      delay,
      stagger,
      ease: 'power2.out',
      scrollTrigger: {
        trigger: containerRef.current,
        start: 'top 80%',
        toggleActions: 'play none none none',
      },
    });

    return () => {
      ScrollTrigger.getAll().forEach((trigger) => {
        trigger.kill();
      });
    };
  }, [delay, duration, stagger]);

  return (
    <section ref={containerRef} className="fade-in-container">
      {React.Children.map(children, (child, index) => (
        <div key={index} className="fade-in-element">
          {child}
        </div>
      ))}
    </section>
  );
};