Reapply "All done!!!"

This reverts commit 92b0333.

Author: GuillermoC66

src/components/Animation/4-7-8Animation.tsx

@@ -1,5 +1,5 @@
-import { motion, useAnimation } from "framer-motion";
-import { useEffect } from "react";
+import { motion, useAnimate, AnimationPlaybackControlsWithThen} from "framer-motion";
+import { useEffect, useState } from "react";
 
 const Exercise478 = ({isPaused}: {isPaused: boolean}) => {
   return (
@@ -29,22 +29,36 @@ const BreathingSequence = ({isPaused}: {isPaused: boolean}) => {
 };
 
 const Inhale = ({ delay, isPaused }: { delay: number, isPaused: boolean }) => {
-  const controls =useAnimation();
-  useEffect(() => {
-    controls.start({  
-    });
-  });
-
-  useEffect(() => {
-    if (isPaused) {
-      controls.stop();
-    } else {
-      controls.start();
-    };
-  }, [isPaused, controls]);
+ const [scope, animate] = useAnimate();
+  const [controls, setControls] = useState<AnimationPlaybackControlsWithThen>()
 
+  useEffect(()=>{
+    const animation = animate(scope.current,{
+          opacity: [0.3, 0.5, 0.5, 0.3],
+        scale: [1.5, 3.5, 3.5, 1.5],
+    }, {
+      
+        repeat: Infinity,
+        repeatType: "loop",
+        duration: 19,
+        ease: ["easeInOut", "circOut"] ,
+        times: [0, 0.21, 0.58, 1],
+        delay,
+      })
+    setControls(animation);
+  }, [animate, delay, scope]);
+
+  useEffect(()=>{
+    if(isPaused){
+      controls?.pause();
+    } else {
+      controls?.play();
+    }
+  },[isPaused, controls])
+  
   return (
     <motion.span
+    ref={scope}
       style={{
         x: "50%",
         y: "50%",
@@ -55,18 +69,7 @@ const Inhale = ({ delay, isPaused }: { delay: number, isPaused: boolean }) => {
         x: "-50%",
         y: "-50%",
       }}
-      animate={{
-        opacity: [0.3, 0.5, 0.5, 0.3],
-        scale: [1.5, 3.5, 3.5, 1.5],
-      }}
-      transition={{
-        repeat: Infinity,
-        repeatType: "loop",
-        duration: 19,
-        ease: ["easeInOut", "circOut"] ,
-        times: [0, 0.21, 0.58, 1],
-        delay,
-      }}
+      
       className=" opacity-1 fixed top-1/2 left-1/2
       h-[25vw] w-[25vw] rounded-full  
       bg-gradient-to-br from-[var(--gradient-1-1)] to-[var(--gradient-1-2)]-500/20 
@@ -77,22 +80,36 @@ const Inhale = ({ delay, isPaused }: { delay: number, isPaused: boolean }) => {
 
 
 const Inhale2 = ({ delay, isPaused }: { delay: number, isPaused: boolean }) => {
-  const controls =useAnimation();
-  useEffect(() => {
-    controls.start({  
-    });
-  });
-
-  useEffect(() => {
-    if (isPaused) {
-      controls.stop();
-    } else {
-      controls.start();
-    };
-  }, [isPaused, controls]);
+ const [scope, animate] = useAnimate();
+  const [controls, setControls] = useState<AnimationPlaybackControlsWithThen>()
 
+  useEffect(()=>{
+    const animation = animate(scope.current,{
+          opacity: [0.3, 0.7, 0.7, 0.5],
+        scale: [1.5, 3, 3, 1.5],
+    }, {
+      
+        repeat: Infinity,
+        repeatType: "loop",
+        duration: 19,
+        ease: ["easeInOut", "circOut"] ,
+        times: [0, 0.21, 0.58, 1],
+        delay,
+      })
+    setControls(animation);
+  }, [animate, delay, scope]);
+
+  useEffect(()=>{
+    if(isPaused){
+      controls?.pause();
+    } else {
+      controls?.play();
+    }
+  },[isPaused, controls])
+  
   return (
     <motion.span
+    ref={scope}
       style={{
         x: "50%",
         y: "50%",
@@ -103,18 +120,7 @@ const Inhale2 = ({ delay, isPaused }: { delay: number, isPaused: boolean }) => {
         x: "-50%",
         y: "-50%",
       }}
-      animate={{
-        opacity: [0.3, 0.7, 0.7, 0.5],
-        scale: [1.5, 3, 3, 1.5],
-      }}
-      transition={{
-        repeat: Infinity,
-        repeatType: "loop",
-        duration: 19,
-        ease: ["easeInOut", "circOut"] ,
-        times: [0, 0.21, 0.58, 1],
-        delay,
-      }}
+      
       className=" opacity-1 fixed top-1/2 left-1/2
       h-[25vw] w-[25vw] rounded-full  
       bg-gradient-to-br from-[var(--gradient-1-1)] to-[var(--gradient-1-2)]-500/20 
@@ -123,22 +129,36 @@ const Inhale2 = ({ delay, isPaused }: { delay: number, isPaused: boolean }) => {
 };
 
 const Inhale3 = ({ delay, isPaused }: { delay: number, isPaused: boolean }) => {
-  const controls =useAnimation();
-  useEffect(() => {
-    controls.start({  
-    });
-  });
-
-  useEffect(() => {
-    if (isPaused) {
-      controls.stop();
-    } else {
-      controls.start();
-    };
-  }, [isPaused, controls]);
+  const [scope, animate] = useAnimate();
+  const [controls, setControls] = useState<AnimationPlaybackControlsWithThen>()
 
+  useEffect(()=>{
+    const animation = animate(scope.current,{
+          opacity: [0.5, 0.9, 0.9, 0.7],
+        scale: [1.5, 2.5, 2.5, 1.5],
+    }, {
+      
+        repeat: Infinity,
+        repeatType: "loop",
+        duration: 19,
+        ease: ["easeInOut", "circOut"] ,
+        times: [0, 0.21, 0.58, 1],
+        delay,
+      })
+    setControls(animation);
+  }, [animate, delay, scope]);
+
+  useEffect(()=>{
+    if(isPaused){
+      controls?.pause();
+    } else {
+      controls?.play();
+    }
+  },[isPaused, controls])
+  
   return (
     <motion.span
+    ref={scope}
       style={{
         x: "50%",
         y: "50%",
@@ -149,41 +169,44 @@ const Inhale3 = ({ delay, isPaused }: { delay: number, isPaused: boolean }) => {
         x: "-50%",
         y: "-50%",
       }}
-      animate={{
-        opacity: [0.5, 0.9, 0.9, 0.7],
-        scale: [1.5, 2.5, 2.5, 1.5],
-      }}
-      transition={{
-        repeat: Infinity,
-        repeatType: "loop",
-        duration: 19,
-        ease: ["easeInOut", "circOut"] ,
-        times: [0, 0.21, 0.58, 1],
-        delay,
-      }}
+      
       className=" opacity-1 fixed top-1/2 left-1/2
       h-[25vw] w-[25vw] rounded-full  
       bg-gradient-to-br from-[var(--gradient-1-1)] to-[var(--gradient-1-2)]-500/20 
       shadow-m [#ffcec5]-500/20 overflow-auto"/>
   );
 };
 const Inhale4 = ({ delay, isPaused }: { delay: number, isPaused: boolean }) => {
-  const controls =useAnimation();
-  useEffect(() => {
-    controls.start({  
-    });
-  });
-
-  useEffect(() => {
-    if (isPaused) {
-      controls.stop();
-    } else {
-      controls.subscribe();
-    };
-  }, [isPaused, controls]);
+  const [scope, animate] = useAnimate();
+  const [controls, setControls] = useState<AnimationPlaybackControlsWithThen>()
 
+  useEffect(()=>{
+    const animation = animate(scope.current,{
+    opacity: [0.3, 0.0, 0.0, 0.1],
+        scale: [1.5, 3.7, 3.5, 1.5],
+    }, {
+      
+        repeat: Infinity,
+        repeatType: "loop",
+        duration: 19,
+        ease: ["easeInOut", "circOut"] ,
+        times: [0, 0.21, 0.58, 1],
+        delay,
+      })
+    setControls(animation);
+  }, [animate, delay, scope]);
+
+  useEffect(()=>{
+    if(isPaused){
+      controls?.pause();
+    } else {
+      controls?.play();
+    }
+  },[isPaused, controls])
+  
   return (
     <motion.span
+    ref={scope}
       style={{
         x: "50%",
         y: "50%",
@@ -194,18 +217,7 @@ const Inhale4 = ({ delay, isPaused }: { delay: number, isPaused: boolean }) => {
         x: "-50%",
         y: "-50%",
       }}
-      animate={{
-        opacity: [0.3, 0.0, 0.0, 0.1],
-        scale: [1.5, 3.7, 3.5, 1.5],
-      }}
-      transition={{
-        repeat: Infinity,
-        repeatType: "loop",
-        duration: 19,
-        ease: ["easeInOut", "circOut"] ,
-        times: [0, 0.21, 0.58, 1],
-        delay,
-      }}
+      
       className=" opacity-1 fixed top-1/2 left-1/2
       h-[25vw] w-[25vw] rounded-full  
       bg-gradient-to-br from-[var(--gradient-1-1)] to-[var(--gradient-1-2)]-500/20