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  ...props
47}) => {
48  const ref = useRef<HTMLDivElement>(null);
49 
50  useEffect(() => {
51    const el = ref.current;
52    if (!el) return;
53 
54    let scrollerTarget: Element | string | null = container || document.getElementById('snap-main-container') || null;
55 
56    if (typeof scrollerTarget === 'string') {
57      scrollerTarget = document.querySelector(scrollerTarget);
58    }
59 
60    const axis = direction === 'horizontal' ? 'x' : 'y';
61    const offset = reverse ? -distance : distance;
62    const startPct = (1 - threshold) * 100;
63 
64    gsap.set(el, {
65      [axis]: offset,
66      scale,
67      opacity: animateOpacity ? initialOpacity : 1,
68      visibility: 'visible'
69    });
70 
71    const tl = gsap.timeline({
72      paused: true,
73      delay,
74      onComplete: () => {
75        if (onComplete) onComplete();
76        if (disappearAfter > 0) {
77          gsap.to(el, {
78            [axis]: reverse ? distance : -distance,
79            scale: 0.8,
80            opacity: animateOpacity ? initialOpacity : 0,
81            delay: disappearAfter,
82            duration: disappearDuration,
83            ease: disappearEase,
84            onComplete: () => onDisappearanceComplete?.()
85          });
86        }
87      }
88    });
89 
90    tl.to(el, {
91      [axis]: 0,
92      scale: 1,
93      opacity: 1,
94      duration,
95      ease
96    });
97 
98    const st = ScrollTrigger.create({
99      trigger: el,
100// … truncated