Rewrite parallax to it's cleaner

components/Parallax/Parallax.tsx

@@ -19,41 +19,22 @@ type ParallaxProps = {
   children: ReactNode;
 };
 
-/**
- * Using guide from https://samuelkraft.com/blog/spring-parallax-framer-motion-guide
- */
-export const Parallax = ({ children, offset = 60 }: ParallaxProps) => {
+export const Parallax = ({ children, offset }: ParallaxProps) => {
   const prefersReducedMotion = useReducedMotion();
-
-  const { scrollY } = useScroll();
-  const [elementTop, setElementTop] = useState(0);
-  const [clientHeight, setClientHeight] = useState(0);
   const ref = useRef<HTMLDivElement>(null);
-
-  useLayoutEffect(() => {
-    const element = ref.current;
-    const onResize = () => {
-      const topOfElement = (element?.getBoundingClientRect()?.top ?? 0) + window.scrollY;
-      setElementTop(topOfElement);
-      setClientHeight(window.innerHeight);
-    };
-    onResize();
-    window.addEventListener('resize', onResize);
-    return () => window.removeEventListener('resize', onResize);
-  }, [ref]);
-
-  const initial = elementTop - clientHeight;
-  const final = elementTop + offset;
-
-  const yRange = useTransform(scrollY, [initial, final], [offset, -offset]);
+  const { scrollYProgress } = useScroll({
+    target: ref,
+    // This mean aniimation starts when the top of the image touches the bottom of the viewport,
+    // and ends when the bottom of the image touches the top of the viewport.
+    offset: ['start end', 'end start'],
+  });
+  const yRange = useTransform(scrollYProgress, [0, 1], [offset, -offset]);
   const y = useSpring(yRange, { stiffness: 200, damping: 30 });
 
-  if (prefersReducedMotion) {
-    return <>{children}</>;
-  }
+  const conditionalY = prefersReducedMotion ? 0 : y;
 
   return (
-    <m.div ref={ref} style={{ y }}>
+    <m.div ref={ref} style={{ y: conditionalY }}>
       {children}
     </m.div>
   );

components/VerticalPoster/VerticalPoster.styles.ts

@@ -60,5 +60,5 @@ export const parallaxBgImage = (prefersReducedMotion: boolean) => cnb('relative
 });
 export const parallaxForegroundWrapper = 'absolute top-0 right-0 z-10';
 export const parallaxImage = (prefersReducedMotion: boolean) => cnb('relative size-full object-cover', {
-  'mt-[7%] lg:mt-[3vw]': !prefersReducedMotion,
+  //'mt-[7%] lg:mt-[3vw]': !prefersReducedMotion,
 });