Scroll targeting, fix cleanup & add exit animations

- Replace global ScrollTrigger cleanup with instance-specific kill() to prevent side effects
- Add `container` support for custom scroll proxies (CSS snap or locomotive-scroll)
- Update  animation logic from `gsap.to` to `gsap.timeline`
- Implement disappear animation and speciefic props
- Fix animation glitch by setting initial visibility to hidden

Author: freakdaniel

src/content/Animations/AnimatedContent/AnimatedContent.jsx

@@ -6,6 +6,7 @@ gsap.registerPlugin(ScrollTrigger);
 
 const AnimatedContent = ({
   children,
+  container,
   distance = 100,
   direction = 'vertical',
   reverse = false,
@@ -16,59 +17,83 @@ const AnimatedContent = ({
   scale = 1,
   threshold = 0.1,
   delay = 0,
-  onComplete
+  disappearAfter = 0,
+  disappearDuration = 0.5,
+  disappearEase = 'power3.in',
+  onComplete,
+  onDisappearanceComplete
 }) => {
   const ref = useRef(null);
 
   useEffect(() => {
     const el = ref.current;
     if (!el) return;
 
+    let scrollerTarget = container || document.getElementById('snap-main-container') || null;
+    
+    if (typeof scrollerTarget === 'string') {
+        scrollerTarget = document.querySelector(scrollerTarget);
+    }
+
     const axis = direction === 'horizontal' ? 'x' : 'y';
     const offset = reverse ? -distance : distance;
     const startPct = (1 - threshold) * 100;
 
     gsap.set(el, {
       [axis]: offset,
       scale,
-      opacity: animateOpacity ? initialOpacity : 1
+      opacity: animateOpacity ? initialOpacity : 1,
+      visibility: 'visible'
+    });
+
+    const tl = gsap.timeline({
+      paused: true,
+      delay,
+      onComplete: () => {
+        if (onComplete) onComplete();
+        if (disappearAfter > 0) {
+          gsap.to(el, {
+            [axis]: reverse ? distance : -distance,
+            scale: 0.8,
+            opacity: animateOpacity ? initialOpacity : 0,
+            delay: disappearAfter,
+            duration: disappearDuration,
+            ease: disappearEase,
+            onComplete: () => onDisappearanceComplete?.()
+          });
+        }
+      }
     });
 
-    gsap.to(el, {
+    tl.to(el, {
       [axis]: 0,
       scale: 1,
       opacity: 1,
       duration,
-      ease,
-      delay,
-      onComplete,
-      scrollTrigger: {
-        trigger: el,
-        start: `top ${startPct}%`,
-        toggleActions: 'play none none none',
-        once: true
-      }
+      ease
+    });
+
+    const st = ScrollTrigger.create({
+      trigger: el,
+      scroller: scrollerTarget,
+      start: `top ${startPct}%`,
+      once: true,
+      onEnter: () => tl.play()
     });
 
     return () => {
-      ScrollTrigger.getAll().forEach(t => t.kill());
-      gsap.killTweensOf(el);
+      st.kill();
+      tl.kill();
     };
   }, [
-    distance,
-    direction,
-    reverse,
-    duration,
-    ease,
-    initialOpacity,
-    animateOpacity,
-    scale,
-    threshold,
-    delay,
-    onComplete
+    container,
+    distance, direction, reverse, duration, ease, 
+    initialOpacity, animateOpacity, scale, threshold, 
+    delay, disappearAfter, disappearDuration, 
+    disappearEase, onComplete, onDisappearanceComplete
   ]);
 
-  return <div ref={ref}>{children}</div>;
+  return <div ref={ref} style={{ visibility: 'hidden' }}>{children}</div>;
 };
 
-export default AnimatedContent;
+export default AnimatedContent;