{

"type":"registry:component",

"path":"AnimatedContent/AnimatedContent.jsx",

"content": "import { useRef, useEffect } from 'react';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\n\ngsap.registerPlugin(ScrollTrigger);\n\nconst AnimatedContent = ({\n children,\n container,\n distance = 100,\n direction = 'vertical',\n reverse = false,\n duration = 0.8,\n ease = 'power3.out',\n initialOpacity = 0,\n animateOpacity = true,\n scale = 1,\n threshold = 0.1,\n delay = 0,\n disappearAfter = 0,\n disappearDuration = 0.5,\n disappearEase = 'power3.in',\n onComplete,\n onDisappearanceComplete,\n className = '',\n ...props\n}) => {\n const ref = useRef(null);\n\n useEffect(() => {\n const el = ref.current;\n if (!el) return;\n\n let scrollerTarget = container || document.getElementById('snap-main-container') || null;\n \n if (typeof scrollerTarget === 'string') {\n scrollerTarget = document.querySelector(scrollerTarget);\n }\n\n const axis = direction === 'horizontal' ? 'x' : 'y';\n const offset = reverse ? -distance : distance;\n const startPct = (1 - threshold) * 100;\n\n gsap.set(el, {\n [axis]: offset,\n scale,\n opacity: animateOpacity ? initialOpacity : 1,\n visibility: 'visible'\n });\n\n const tl = gsap.timeline({\n paused: true,\n delay,\n onComplete: () => {\n if (onComplete) onComplete();\n if (disappearAfter > 0) {\n gsap.to(el, {\n [axis]: reverse ? distance : -distance,\n scale: 0.8,\n opacity: animateOpacity ? initialOpacity : 0,\n delay: disappearAfter,\n duration: disappearDuration,\n ease: disappearEase,\n onComplete: () => onDisappearanceComplete?.()\n });\n }\n }\n });\n\n tl.to(el, {\n [axis]: 0,\n scale: 1,\n opacity: 1,\n duration,\n ease\n });\n\n const st = ScrollTrigger.create({\n trigger: el,\n scroller: scrollerTarget,\n start: `top ${startPct}%`,\n once: true,\n onEnter: () => tl.play()\n });\n\n return () => {\n st.kill();\n tl.kill();\n };\n }, [\n container,\n distance, direction, reverse, duration, ease, \n initialOpacity, animateOpacity, scale, threshold, \n delay, disappearAfter, disappearDuration, \n disappearEase, onComplete, onDisappearanceComplete\n ]);\n\n return (\n <div \n ref={ref} \n className={className}\n style={{ visibility: 'hidden' }} \n {...props}\n >\n {children}\n </div>\n );\n};\n\nexport default AnimatedContent;"

"content": "import { useRef, useEffect } from 'react';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\n\ngsap.registerPlugin(ScrollTrigger);\n\nconst AnimatedContent = ({\n children,\n container,\n distance = 100,\n direction = 'vertical',\n reverse = false,\n duration = 0.8,\n ease = 'power3.out',\n initialOpacity = 0,\n animateOpacity = true,\n scale = 1,\n threshold = 0.1,\n delay = 0,\n disappearAfter = 0,\n disappearDuration = 0.5,\n disappearEase = 'power3.in',\n onComplete,\n onDisappearanceComplete,\n className = '',\n ...props\n}) => {\n const ref = useRef(null);\n\n useEffect(() => {\n const el = ref.current;\n if (!el) return;\n\n let scrollerTarget = container || document.getElementById('snap-main-container') || null;\n\n if (typeof scrollerTarget === 'string') {\n scrollerTarget = document.querySelector(scrollerTarget);\n }\n\n const axis = direction === 'horizontal' ? 'x' : 'y';\n const offset = reverse ? -distance : distance;\n const startPct = (1 - threshold) * 100;\n\n gsap.set(el, {\n [axis]: offset,\n scale,\n opacity: animateOpacity ? initialOpacity : 1,\n visibility: 'visible'\n });\n\n const tl = gsap.timeline({\n paused: true,\n delay,\n onComplete: () => {\n if (onComplete) onComplete();\n if (disappearAfter > 0) {\n gsap.to(el, {\n [axis]: reverse ? distance : -distance,\n scale: 0.8,\n opacity: animateOpacity ? initialOpacity : 0,\n delay: disappearAfter,\n duration: disappearDuration,\n ease: disappearEase,\n onComplete: () => onDisappearanceComplete?.()\n });\n }\n }\n });\n\n tl.to(el, {\n [axis]: 0,\n scale: 1,\n opacity: 1,\n duration,\n ease\n });\n\n const st = ScrollTrigger.create({\n trigger: el,\n scroller: scrollerTarget,\n start: `top ${startPct}%`,\n once: true,\n onEnter: () => tl.play()\n });\n\n return () => {\n st.kill();\n tl.kill();\n };\n }, [\n container,\n distance,\n direction,\n reverse,\n duration,\n ease,\n initialOpacity,\n animateOpacity,\n scale,\n threshold,\n delay,\n disappearAfter,\n disappearDuration,\n disappearEase,\n onComplete,\n onDisappearanceComplete\n ]);\n\n return (\n <div ref={ref} className={className} style={{ visibility: 'hidden' }} {...props}>\n {children}\n </div>\n );\n};\n\nexport default AnimatedContent;\n"

}

],

"registryDependencies": [],

{

"type":"registry:component",

"path":"AnimatedContent/AnimatedContent.jsx",

"content": "import { useRef, useEffect } from 'react';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\n\ngsap.registerPlugin(ScrollTrigger);\n\nconst AnimatedContent = ({\n children,\n container,\n distance = 100,\n direction = 'vertical',\n reverse = false,\n duration = 0.8,\n ease = 'power3.out',\n initialOpacity = 0,\n animateOpacity = true,\n scale = 1,\n threshold = 0.1,\n delay = 0,\n disappearAfter = 0,\n disappearDuration = 0.5,\n disappearEase = 'power3.in',\n onComplete,\n onDisappearanceComplete,\n className = '',\n ...props\n}) => {\n const ref = useRef(null);\n\n useEffect(() => {\n const el = ref.current;\n if (!el) return;\n\n let scrollerTarget = container || document.getElementById('snap-main-container') || null;\n\n if (typeof scrollerTarget === 'string') {\n scrollerTarget = document.querySelector(scrollerTarget);\n }\n\n const axis = direction === 'horizontal' ? 'x' : 'y';\n const offset = reverse ? -distance : distance;\n const startPct = (1 - threshold) * 100;\n\n gsap.set(el, {\n [axis]: offset,\n scale,\n opacity: animateOpacity ? initialOpacity : 1,\n visibility: 'visible'\n });\n\n const tl = gsap.timeline({\n paused: true,\n delay,\n onComplete: () => {\n if (onComplete) onComplete();\n if (disappearAfter > 0) {\n gsap.to(el, {\n [axis]: reverse ? distance : -distance,\n scale: 0.8,\n opacity: animateOpacity ? initialOpacity : 0,\n delay: disappearAfter,\n duration: disappearDuration,\n ease: disappearEase,\n onComplete: () => onDisappearanceComplete?.()\n });\n }\n }\n });\n\n tl.to(el, {\n [axis]: 0,\n scale: 1,\n opacity: 1,\n duration,\n ease\n });\n\n const st = ScrollTrigger.create({\n trigger: el,\n scroller: scrollerTarget,\n start: `top ${startPct}%`,\n once: true,\n onEnter: () => tl.play()\n });\n\n return () => {\n st.kill();\n tl.kill();\n };\n }, [\n container,\n distance, direction, reverse, duration, ease,\n initialOpacity, animateOpacity, scale, threshold,\n delay, disappearAfter, disappearDuration,\n disappearEase, onComplete, onDisappearanceComplete\n ]);\n\n return (\n <div\n ref={ref}\n className={`invisible ${className}`}\n {...props}\n >\n {children}\n </div>\n );\n};\n\nexport default AnimatedContent;"

"content": "import { useRef, useEffect } from 'react';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\n\ngsap.registerPlugin(ScrollTrigger);\n\nconst AnimatedContent = ({\n children,\n container,\n distance = 100,\n direction = 'vertical',\n reverse = false,\n duration = 0.8,\n ease = 'power3.out',\n initialOpacity = 0,\n animateOpacity = true,\n scale = 1,\n threshold = 0.1,\n delay = 0,\n disappearAfter = 0,\n disappearDuration = 0.5,\n disappearEase = 'power3.in',\n onComplete,\n onDisappearanceComplete,\n className = '',\n ...props\n}) => {\n const ref = useRef(null);\n\n useEffect(() => {\n const el = ref.current;\n if (!el) return;\n\n let scrollerTarget = container || document.getElementById('snap-main-container') || null;\n\n if (typeof scrollerTarget === 'string') {\n scrollerTarget = document.querySelector(scrollerTarget);\n }\n\n const axis = direction === 'horizontal' ? 'x' : 'y';\n const offset = reverse ? -distance : distance;\n const startPct = (1 - threshold) * 100;\n\n gsap.set(el, {\n [axis]: offset,\n scale,\n opacity: animateOpacity ? initialOpacity : 1,\n visibility: 'visible'\n });\n\n const tl = gsap.timeline({\n paused: true,\n delay,\n onComplete: () => {\n if (onComplete) onComplete();\n if (disappearAfter > 0) {\n gsap.to(el, {\n [axis]: reverse ? distance : -distance,\n scale: 0.8,\n opacity: animateOpacity ? initialOpacity : 0,\n delay: disappearAfter,\n duration: disappearDuration,\n ease: disappearEase,\n onComplete: () => onDisappearanceComplete?.()\n });\n }\n }\n });\n\n tl.to(el, {\n [axis]: 0,\n scale: 1,\n opacity: 1,\n duration,\n ease\n });\n\n const st = ScrollTrigger.create({\n trigger: el,\n scroller: scrollerTarget,\n start: `top ${startPct}%`,\n once: true,\n onEnter: () => tl.play()\n });\n\n return () => {\n st.kill();\n tl.kill();\n };\n }, [\n container,\n distance,\n direction,\n reverse,\n duration,\n ease,\n initialOpacity,\n animateOpacity,\n scale,\n threshold,\n delay,\n disappearAfter,\n disappearDuration,\n disappearEase,\n onComplete,\n onDisappearanceComplete\n ]);\n\n return (\n <div ref={ref} className={`invisible ${className}`} {...props}>\n {children}\n </div>\n );\n};\n\nexport default AnimatedContent;\n"

}

],

"registryDependencies": [],

{

"type":"registry:component",

"path":"AnimatedContent/AnimatedContent.tsx",

"content": "import React, { useRef, useEffect } from 'react';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\n\ngsap.registerPlugin(ScrollTrigger);\n\ninterface AnimatedContentProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n container?: Element | string | null;\n distance?: number;\n direction?: 'vertical' | 'horizontal';\n reverse?: boolean;\n duration?: number;\n ease?: string;\n initialOpacity?: number;\n animateOpacity?: boolean;\n scale?: number;\n threshold?: number;\n delay?: number;\n disappearAfter?: number;\n disappearDuration?: number;\n disappearEase?: string;\n onComplete?: () => void;\n onDisappearanceComplete?: () => void;\n}\n\nconst AnimatedContent: React.FC<AnimatedContentProps> = ({\n children,\n container,\n distance = 100,\n direction = 'vertical',\n reverse = false,\n duration = 0.8,\n ease = 'power3.out',\n initialOpacity = 0,\n animateOpacity = true,\n scale = 1,\n threshold = 0.1,\n delay = 0,\n disappearAfter = 0,\n disappearDuration = 0.5,\n disappearEase = 'power3.in',\n onComplete,\n onDisappearanceComplete,\n className = '',\n style,\n ...props\n}) => {\n const ref = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const el = ref.current;\n if (!el) return;\n\n let scrollerTarget: Element | string | null = \n container || document.getElementById('snap-main-container') || null;\n\n if (typeof scrollerTarget === 'string') {\n scrollerTarget = document.querySelector(scrollerTarget);\n }\n\n const axis = direction === 'horizontal' ? 'x' : 'y';\n const offset = reverse ? -distance : distance;\n const startPct = (1 - threshold) * 100;\n\n gsap.set(el, {\n [axis]: offset,\n scale,\n opacity: animateOpacity ? initialOpacity : 1,\n visibility: 'visible'\n });\n\n const tl = gsap.timeline({\n paused: true,\n delay,\n onComplete: () => {\n if (onComplete) onComplete();\n \n if (disappearAfter > 0) {\n gsap.to(el, {\n [axis]: reverse ? distance : -distance,\n scale: 0.8,\n opacity: animateOpacity ? initialOpacity : 0,\n delay: disappearAfter,\n duration: disappearDuration,\n ease: disappearEase,\n onComplete: () => onDisappearanceComplete?.()\n });\n }\n }\n });\n\n tl.to(el, {\n [axis]: 0,\n scale: 1,\n opacity: 1,\n duration,\n ease\n });\n\n const st = ScrollTrigger.create({\n trigger: el,\n scroller: scrollerTarget || window,\n start: `top ${startPct}%`,\n once: true,\n onEnter: () => tl.play()\n });\n\n return () => {\n st.kill();\n tl.kill();\n };\n }, [\n container,\n distance,\n direction,\n reverse,\n duration,\n ease,\n initialOpacity,\n animateOpacity,\n scale,\n threshold,\n delay,\n disappearAfter,\n disappearDuration,\n disappearEase,\n onComplete,\n onDisappearanceComplete\n ]);\n\n return (\n <div\n ref={ref}\n className={className}\n style={{ visibility: 'hidden', ...style }}\n {...props}\n >\n {children}\n </div>\n );\n};\n\nexport default AnimatedContent;"

"content": "import React, { useRef, useEffect } from 'react';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\n\ngsap.registerPlugin(ScrollTrigger);\n\ninterface AnimatedContentProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n container?: Element | string | null;\n distance?: number;\n direction?: 'vertical' | 'horizontal';\n reverse?: boolean;\n duration?: number;\n ease?: string;\n initialOpacity?: number;\n animateOpacity?: boolean;\n scale?: number;\n threshold?: number;\n delay?: number;\n disappearAfter?: number;\n disappearDuration?: number;\n disappearEase?: string;\n onComplete?: () => void;\n onDisappearanceComplete?: () => void;\n}\n\nconst AnimatedContent: React.FC<AnimatedContentProps> = ({\n children,\n container,\n distance = 100,\n direction = 'vertical',\n reverse = false,\n duration = 0.8,\n ease = 'power3.out',\n initialOpacity = 0,\n animateOpacity = true,\n scale = 1,\n threshold = 0.1,\n delay = 0,\n disappearAfter = 0,\n disappearDuration = 0.5,\n disappearEase = 'power3.in',\n onComplete,\n onDisappearanceComplete,\n className = '',\n style,\n ...props\n}) => {\n const ref = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const el = ref.current;\n if (!el) return;\n\n let scrollerTarget: Element | string | null = container || document.getElementById('snap-main-container') || null;\n\n if (typeof scrollerTarget === 'string') {\n scrollerTarget = document.querySelector(scrollerTarget);\n }\n\n const axis = direction === 'horizontal' ? 'x' : 'y';\n const offset = reverse ? -distance : distance;\n const startPct = (1 - threshold) * 100;\n\n gsap.set(el, {\n [axis]: offset,\n scale,\n opacity: animateOpacity ? initialOpacity : 1,\n visibility: 'visible'\n });\n\n const tl = gsap.timeline({\n paused: true,\n delay,\n onComplete: () => {\n if (onComplete) onComplete();\n\n if (disappearAfter > 0) {\n gsap.to(el, {\n [axis]: reverse ? distance : -distance,\n scale: 0.8,\n opacity: animateOpacity ? initialOpacity : 0,\n delay: disappearAfter,\n duration: disappearDuration,\n ease: disappearEase,\n onComplete: () => onDisappearanceComplete?.()\n });\n }\n }\n });\n\n tl.to(el, {\n [axis]: 0,\n scale: 1,\n opacity: 1,\n duration,\n ease\n });\n\n const st = ScrollTrigger.create({\n trigger: el,\n scroller: scrollerTarget || window,\n start: `top ${startPct}%`,\n once: true,\n onEnter: () => tl.play()\n });\n\n return () => {\n st.kill();\n tl.kill();\n };\n }, [\n container,\n distance,\n direction,\n reverse,\n duration,\n ease,\n initialOpacity,\n animateOpacity,\n scale,\n threshold,\n delay,\n disappearAfter,\n disappearDuration,\n disappearEase,\n onComplete,\n onDisappearanceComplete\n ]);\n\n return (\n <div ref={ref} className={className} style={{ visibility: 'hidden', ...style }} {...props}>\n {children}\n </div>\n );\n};\n\nexport default AnimatedContent;\n"

}

],

"registryDependencies": [],