AnimatedContent

1import { useRef, useEffect } from 'react';
2import { gsap } from 'gsap';
3import { ScrollTrigger } from 'gsap/ScrollTrigger';
4 
5gsap.registerPlugin(ScrollTrigger);
6 
7const AnimatedContent = ({
8  children,
9  container,
10  distance = 100,
11  direction = 'vertical',
12  reverse = false,
13  duration = 0.8,
14  ease = 'power3.out',
15  initialOpacity = 0,
16  animateOpacity = true,
17  scale = 1,
18  threshold = 0.1,
19  delay = 0,
20  disappearAfter = 0,
21  disappearDuration = 0.5,
22  disappearEase = 'power3.in',
23  onComplete,
24  onDisappearanceComplete,
25  className = '',
26  ...props
27}) => {
28  const ref = useRef(null);
29 
30  useEffect(() => {
31    const el = ref.current;
32    if (!el) return;
33 
34    let scrollerTarget = container || document.getElementById('snap-main-container') || null;
35 
36    if (typeof scrollerTarget === 'string') {
37      scrollerTarget = document.querySelector(scrollerTarget);
38    }
39 
40    const axis = direction === 'horizontal' ? 'x' : 'y';
41    const offset = reverse ? -distance : distance;
42    const startPct = (1 - threshold) * 100;
43 
44    gsap.set(el, {
45      [axis]: offset,
46      scale,
47      opacity: animateOpacity ? initialOpacity : 1,
48      visibility: 'visible'
49    });
50 
51    const tl = gsap.timeline({
52      paused: true,
53      delay,
54      onComplete: () => {
55        if (onComplete) onComplete();
56        if (disappearAfter > 0) {
57          gsap.to(el, {
58            [axis]: reverse ? distance : -distance,
59            scale: 0.8,
60            opacity: animateOpacity ? initialOpacity : 0,
61            delay: disappearAfter,
62            duration: disappearDuration,
63            ease: disappearEase,
64            onComplete: () => onDisappearanceComplete?.()
65          });
66        }
67      }
68    });
69 
70    tl.to(el, {
71      [axis]: 0,
72      scale: 1,
73      opacity: 1,
74      duration,
75      ease
76    });
77 
78    const st = ScrollTrigger.create({
79      trigger: el,
80      scroller: scrollerTarget,
81      start: `top ${startPct}%`,
82      once: true,
83      onEnter: () => tl.play()
84    });
85 
86    return () => {
87      st.kill();
88      tl.kill();
89    };
90  }, [
91    container,
92    distance,
93    direction,
94    reverse,
95    duration,
96    ease,
97    initialOpacity,
98    animateOpacity,
99    scale,
100    threshold,
101    delay,
102    disappearAfter,
103    disappearDuration,
104    disappearEase,
105    onComplete,
106    onDisappearanceComplete
107  ]);
108 
109  return (
110    <div ref={ref} className={`invisible ${className}`} {...props}>
111      {children}
112    </div>
113  );
114};
115 
116export default AnimatedContent;