Merge pull request #1530 from w3bdesign/develop

Replace Framer Motion

Author: w3bdesign

package-lock.json

@@ -30,9 +30,9 @@
     "@types/react": "^19.1.8",
     "algoliasearch": "^4.25.0",
     "autoprefixer": "^10.4.21",
-    "framer-motion": "12.20.1",
     "graphql": "^16.11.0",
     "lodash": "^4.17.21",
+    "motion": "^12.20.1",
     "next": "15.3.4",
     "nprogress": "^0.2.0",
     "postcss": "^8.5.6",

package.json

@@ -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/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 { IAnimateProps } from './types/Animations.types';
 
@@ -12,13 +11,23 @@ import type { IAnimateProps } from './types/Animations.types';
  */
 
 const FadeLeftToRightItem = ({ children, cssClass }: IAnimateProps) => {
-  const FadeLeftToRightItemVariants = {
-    visible: { opacity: 1, x: 0 },
+  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/FadeLeftToRightItem.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}