From c881d78ae6ee7eacf273f037062f5d4e33d484c6 Mon Sep 17 00:00:00 2001
From: Luqmaan Essop <luqmaan.essop@amazeelabs.com>
Date: Wed, 5 Jun 2024 12:57:42 +0000
Subject: [PATCH] refactor(SLB-405): adjust framer-motion config

---
 packages/ui/src/components/Molecules/FadeUp.tsx          | 9 ++-------
 .../Organisms/PageContent/BlockImageTeasers.tsx          | 4 ++--
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/packages/ui/src/components/Molecules/FadeUp.tsx b/packages/ui/src/components/Molecules/FadeUp.tsx
index 91b794007..3bbc5d7ba 100644
--- 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
index c36ed1dba..ddae12fe9 100644
--- 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', {