scroll triggers

src/components/ui/card.tsx

@@ -31,12 +31,17 @@ function AnimatedCard({
   const gsapContext = useGsapContext()
   const ref = useRef<HTMLDivElement|null>(null)
   useGSAP(() => {
-    gsapContext?.addAnimation(gsap.from(ref.current,{
-      x: -100,
-      opacity: 0,
-      duration: 0.5
-    }),position)
-  })
+    const rect = ref.current?.getBoundingClientRect()
+    const isInView = rect && rect.top < window.innerHeight
+    const fromVars = { x: -100, opacity: 0, duration: 0.5 }
+    if (isInView) {
+      gsapContext?.addAnimation(gsap.from(ref.current, fromVars), position)
+    } else {
+      const scroller = gsapContext?.getScroller()
+      console.log('scroller:', scroller)
+      gsap.from(ref.current, { ...fromVars, scrollTrigger: { trigger: ref.current, start: 'top 85%', scroller, markers: true } })
+    }
+  }, { dependencies: [] })
   return (
     <div
       ref={ref}