Replace Framer Motion with Motion

Author: w3bdesign

src/components/Animations/FadeLeftToRight.component.tsx

@@ -1,5 +1,4 @@
-// CircleCI doesn't like import { motion } from "framer-motion" here, so we use require
-const { motion } = require('framer-motion');
+import { motion, Transition } from 'motion/react';
 
 import type { IAnimateStaggerWithDelayProps } from './types/Animations.types';
 
@@ -21,24 +20,28 @@ const FadeLeftToRight = ({
   staggerDelay,
   animateNotReverse,
 }: IAnimateStaggerWithDelayProps) => {
+  const visibleTransition: Transition = {
+    when: 'beforeChildren',
+    staggerChildren: staggerDelay ? staggerDelay : 0.5,
+    delay,
+    ease: 'easeInOut',
+    staggerDirection: 1,
+  };
+
+  const hiddenTransition: Transition = {
+    when: 'afterChildren',
+    staggerChildren: staggerDelay ? staggerDelay : 0.5,
+    staggerDirection: -1,
+  };
+
   const FadeLeftToRightVariants = {
     visible: {
       opacity: 1,
-      transition: {
-        when: 'beforeChildren',
-        staggerChildren: staggerDelay ? staggerDelay : 0.5,
-        delay,
-        ease: 'easeInOut',
-        staggerDirection: 1,
-      },
+      transition: visibleTransition,
     },
     hidden: {
       opacity: 0,
-      transition: {
-        when: 'afterChildren',
-        staggerChildren: staggerDelay ? staggerDelay : 0.5,
-        staggerDirection: -1,
-      },
+      transition: hiddenTransition,
     },
   };
   return (

src/components/Animations/FadeLeftToRightItem.component.tsx

@@ -1,7 +1,6 @@
-// CircleCI doesn't like import { motion } from "framer-motion" here, so we use require
-const { motion } = require('framer-motion');
+import { motion, Transition } from 'motion/react';
 
-import type { IAnimateProps } from './types/Animations.types';
+import type { IAnimateWithDelayProps } from './types/Animations.types';
 
 /**
  * Fade content left to right. Needs to be used with FadeLeftToRight as parent container
@@ -11,14 +10,27 @@ import type { IAnimateProps } from './types/Animations.types';
  * @returns {JSX.Element} - Rendered component
  */
 
-const FadeLeftToRightItem = ({ children, cssClass }: IAnimateProps) => {
-  const FadeLeftToRightItemVariants = {
-    visible: { opacity: 1, x: 0 },
+const FadeLeftToRightItem = ({
+  children,
+  cssClass,
+}: IAnimateWithDelayProps) => {
+  const transition: Transition = {
+    type: 'spring',
+    duration: 0.5,
+    stiffness: 110,
+  };
+
+  const fadeLeftToRightItemVariants = {
+    visible: {
+      opacity: 1,
+      x: 0,
+      transition,
+    },
     hidden: { opacity: 0, x: -20 },
   };
   return (
     <motion.span
-      variants={FadeLeftToRightItemVariants}
+      variants={fadeLeftToRightItemVariants}
       className={cssClass}
       data-testid="fadelefttorightitem"
     >

src/components/Animations/FadeUp.component.tsx

@@ -1,5 +1,4 @@
-// CircleCI doesn't like import { motion } from "framer-motion" here, so we use require
-const { motion } = require('framer-motion');
+import { motion, Transition } from 'motion/react';
 
 import type { IAnimateWithDelayProps } from './types/Animations.types';
 
@@ -13,14 +12,22 @@ import type { IAnimateWithDelayProps } from './types/Animations.types';
  */
 
 const FadeUp = ({ children, cssClass, delay }: IAnimateWithDelayProps) => {
+  const transition: Transition = {
+    delay,
+    type: 'spring',
+    duration: 0.5,
+    stiffness: 110,
+  };
+
   const fadeUpVariants = {
     initial: { opacity: 0, y: 20 },
     animate: {
       y: 0,
       opacity: 1,
-      transition: { delay, type: 'spring', duration: 0.5, stiffness: 110 },
+      transition,
     },
   };
+
   return (
     <motion.div
       className={cssClass}