fix: GrayscaleTransitionImage effects

getcronit · May 2, 2024 · c0db0d2 · c0db0d2
1 parent 3506e05
commit c0db0d2
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 12 deletions.
diff --git a/src/components/GrayscaleTransitionImage.tsx b/src/components/GrayscaleTransitionImage.tsx
@@ -4,31 +4,40 @@ import {
   useMotionTemplate,
   useScroll,
   useTransform,
+  useMotionValueEvent,
+  useMotionValue,
 } from "framer-motion";
 import { Field } from "@atsnek/jaen";
+import { cn } from "@/lib/utils";
 
-const MotionImage = motion("img");
+const MI = motion.img;
 
 export function GrayscaleTransitionImage(props) {
-  let ref = useRef<HTMLDivElement>();
-  let { scrollYProgress } = useScroll({
+  let ref = useRef<HTMLDivElement>(null);
+  let { scrollYProgress, scrollY } = useScroll({
     target: ref,
     offset: ["start 65%", "end 35%"],
   });
+
+  const value = useMotionValue(scrollYProgress);
+
   let grayscale = useTransform(scrollYProgress, [0, 0.5, 1], [1, 0, 1]);
   let filter = useMotionTemplate`grayscale(${grayscale})`;
 
   return (
     <div ref={ref} className="group relative">
-      <Field.Image
-        name="GrayscaleTransitionImage"
-        className="w-full aspect-[16/10] object-cover grayscale hover:filter-none transition-all duration-300"
-      />
-      {/* <MotionImage alt="" style={{ filter }} {...props} /> */}
+      <motion.div style={{ filter: filter }} {...props}>
+        <Field.Image name="GrayscaleTransitionImage" objectFit="contain" />
+      </motion.div>
       <div
-        className="pointer-events-none absolute left-0 top-0 w-full opacity-0 transition duration-300 group-hover:opacity-100 bg-red-600"
+        className={cn(
+          props.className,
+          "pointer-events-none absolute left-0 top-0 w-full opacity-0 transition duration-300 group-hover:opacity-100"
+        )}
         aria-hidden="true"
-      ></div>
+      >
+        <Field.Image name="GrayscaleTransitionImage" objectFit="contain" />
+      </div>
     </div>
   );
 }
diff --git a/src/templates/WorkTemplate.tsx b/src/templates/WorkTemplate.tsx
@@ -448,8 +448,8 @@ const Page: React.FC<PageProps> = withCMSManagement(() => {
             </div>
 
             <div className="border-y border-neutral-200 bg-neutral-100">
-              <div className="-my-px mx-auto max-w-[76rem] bg-neutral-200">
-                <GrayscaleTransitionImage />
+              <div className="-my-px mx-auto max-w-[76rem] py-24 bg-gradient-to-r from-cyan-500 to-blue-500">
+                <GrayscaleTransitionImage className="w-full aspect-[16/10]" />
               </div>
             </div>
           </FadeIn>