refactor(SLB-405): adjust framer-motion config

AmazeeLabs · Jun 5, 2024 · c881d78 · c881d78
1 parent 0257920
commit c881d78
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 9 deletions.
diff --git a/packages/ui/src/components/Molecules/FadeUp.tsx b/packages/ui/src/components/Molecules/FadeUp.tsx
@@ -1,5 +1,4 @@
 'use client';
-import clsx from 'clsx';
 import { motion, useReducedMotion } from 'framer-motion';
 import React, { PropsWithChildren } from 'react';
 
@@ -10,15 +9,11 @@ export function FadeUp({
 }: PropsWithChildren<{ yGap: number; className?: string }>) {
   const reducedMotion = useReducedMotion();
 
-  console.log('reducedMotion:', reducedMotion);
   return (
     <motion.div
-      className={clsx(
-        className,
-        reducedMotion ? 'reducedMotion: On' : 'reducedMotion: Off',
-      )}
+      className={className}
       transition={{ duration: 0.8 }}
-      style={{ opacity: reducedMotion ? 1 : 0, y: reducedMotion ? 0 : yGap }}
+      initial={{ opacity: reducedMotion ? 1 : 0, y: reducedMotion ? 0 : yGap }}
       viewport={{ once: true }}
       whileInView={{ opacity: 1, y: 0 }}
     >

diff --git a/packages/ui/src/components/Organisms/PageContent/BlockImageTeasers.tsx b/packages/ui/src/components/Organisms/PageContent/BlockImageTeasers.tsx
@@ -7,8 +7,8 @@ import { FadeUp } from '../../Molecules/FadeUp';
 
 export function BlockImageTeasers(props: BlockImageTeasersFragment) {
   return (
-    <FadeUp yGap={50}>
-      <section className="my-10 block-background-image-cards">
+    <FadeUp yGap={50} className="my-10 block-background-image-cards">
+      <section>
         <div className="text-center">
           <div
             className={clsx('grid gap-2', {