AnimatedContent

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