Skip to content

Commit 92b0333

Browse files
GuillermoC66GuillermoC66
committed
Revert "All done!!!"
This reverts commit 7dfc81d.
1 parent cd0913b commit 92b0333

1 file changed

Lines changed: 102 additions & 114 deletions

File tree

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

Lines changed: 102 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { motion, useAnimate, AnimationPlaybackControlsWithThen} from "framer-motion";
2-
import { useEffect, useState } from "react";
1+
import { motion, useAnimation } from "framer-motion";
2+
import { useEffect } from "react";
33

44
const Exercise478 = ({isPaused}: {isPaused: boolean}) => {
55
return (
@@ -29,36 +29,22 @@ const BreathingSequence = ({isPaused}: {isPaused: boolean}) => {
2929
};
3030

3131
const Inhale = ({ delay, isPaused }: { delay: number, isPaused: boolean }) => {
32-
const [scope, animate] = useAnimate();
33-
const [controls, setControls] = useState<AnimationPlaybackControlsWithThen>()
34-
35-
useEffect(()=>{
36-
const animation = animate(scope.current,{
37-
opacity: [0.3, 0.5, 0.5, 0.3],
38-
scale: [1.5, 3.5, 3.5, 1.5],
39-
}, {
40-
41-
repeat: Infinity,
42-
repeatType: "loop",
43-
duration: 19,
44-
ease: ["easeInOut", "circOut"] ,
45-
times: [0, 0.21, 0.58, 1],
46-
delay,
47-
})
48-
setControls(animation);
49-
}, [animate, delay, scope]);
50-
51-
useEffect(()=>{
52-
if(isPaused){
53-
controls?.pause();
32+
const controls =useAnimation();
33+
useEffect(() => {
34+
controls.start({
35+
});
36+
});
37+
38+
useEffect(() => {
39+
if (isPaused) {
40+
controls.stop();
5441
} else {
55-
controls?.play();
56-
}
57-
},[isPaused, controls])
58-
42+
controls.start();
43+
};
44+
}, [isPaused, controls]);
45+
5946
return (
6047
<motion.span
61-
ref={scope}
6248
style={{
6349
x: "50%",
6450
y: "50%",
@@ -69,7 +55,18 @@ const Inhale = ({ delay, isPaused }: { delay: number, isPaused: boolean }) => {
6955
x: "-50%",
7056
y: "-50%",
7157
}}
72-
58+
animate={{
59+
opacity: [0.3, 0.5, 0.5, 0.3],
60+
scale: [1.5, 3.5, 3.5, 1.5],
61+
}}
62+
transition={{
63+
repeat: Infinity,
64+
repeatType: "loop",
65+
duration: 19,
66+
ease: ["easeInOut", "circOut"] ,
67+
times: [0, 0.21, 0.58, 1],
68+
delay,
69+
}}
7370
className=" opacity-1 fixed top-1/2 left-1/2
7471
h-[25vw] w-[25vw] rounded-full
7572
bg-gradient-to-br from-[var(--gradient-1-1)] to-[var(--gradient-1-2)]-500/20
@@ -80,36 +77,22 @@ const Inhale = ({ delay, isPaused }: { delay: number, isPaused: boolean }) => {
8077

8178

8279
const Inhale2 = ({ delay, isPaused }: { delay: number, isPaused: boolean }) => {
83-
const [scope, animate] = useAnimate();
84-
const [controls, setControls] = useState<AnimationPlaybackControlsWithThen>()
85-
86-
useEffect(()=>{
87-
const animation = animate(scope.current,{
88-
opacity: [0.3, 0.7, 0.7, 0.5],
89-
scale: [1.5, 3, 3, 1.5],
90-
}, {
91-
92-
repeat: Infinity,
93-
repeatType: "loop",
94-
duration: 19,
95-
ease: ["easeInOut", "circOut"] ,
96-
times: [0, 0.21, 0.58, 1],
97-
delay,
98-
})
99-
setControls(animation);
100-
}, [animate, delay, scope]);
101-
102-
useEffect(()=>{
103-
if(isPaused){
104-
controls?.pause();
80+
const controls =useAnimation();
81+
useEffect(() => {
82+
controls.start({
83+
});
84+
});
85+
86+
useEffect(() => {
87+
if (isPaused) {
88+
controls.stop();
10589
} else {
106-
controls?.play();
107-
}
108-
},[isPaused, controls])
109-
90+
controls.start();
91+
};
92+
}, [isPaused, controls]);
93+
11094
return (
11195
<motion.span
112-
ref={scope}
11396
style={{
11497
x: "50%",
11598
y: "50%",
@@ -120,7 +103,18 @@ const Inhale2 = ({ delay, isPaused }: { delay: number, isPaused: boolean }) => {
120103
x: "-50%",
121104
y: "-50%",
122105
}}
123-
106+
animate={{
107+
opacity: [0.3, 0.7, 0.7, 0.5],
108+
scale: [1.5, 3, 3, 1.5],
109+
}}
110+
transition={{
111+
repeat: Infinity,
112+
repeatType: "loop",
113+
duration: 19,
114+
ease: ["easeInOut", "circOut"] ,
115+
times: [0, 0.21, 0.58, 1],
116+
delay,
117+
}}
124118
className=" opacity-1 fixed top-1/2 left-1/2
125119
h-[25vw] w-[25vw] rounded-full
126120
bg-gradient-to-br from-[var(--gradient-1-1)] to-[var(--gradient-1-2)]-500/20
@@ -129,36 +123,22 @@ const Inhale2 = ({ delay, isPaused }: { delay: number, isPaused: boolean }) => {
129123
};
130124

131125
const Inhale3 = ({ delay, isPaused }: { delay: number, isPaused: boolean }) => {
132-
const [scope, animate] = useAnimate();
133-
const [controls, setControls] = useState<AnimationPlaybackControlsWithThen>()
134-
135-
useEffect(()=>{
136-
const animation = animate(scope.current,{
137-
opacity: [0.5, 0.9, 0.9, 0.7],
138-
scale: [1.5, 2.5, 2.5, 1.5],
139-
}, {
140-
141-
repeat: Infinity,
142-
repeatType: "loop",
143-
duration: 19,
144-
ease: ["easeInOut", "circOut"] ,
145-
times: [0, 0.21, 0.58, 1],
146-
delay,
147-
})
148-
setControls(animation);
149-
}, [animate, delay, scope]);
150-
151-
useEffect(()=>{
152-
if(isPaused){
153-
controls?.pause();
126+
const controls =useAnimation();
127+
useEffect(() => {
128+
controls.start({
129+
});
130+
});
131+
132+
useEffect(() => {
133+
if (isPaused) {
134+
controls.stop();
154135
} else {
155-
controls?.play();
156-
}
157-
},[isPaused, controls])
158-
136+
controls.start();
137+
};
138+
}, [isPaused, controls]);
139+
159140
return (
160141
<motion.span
161-
ref={scope}
162142
style={{
163143
x: "50%",
164144
y: "50%",
@@ -169,44 +149,41 @@ const Inhale3 = ({ delay, isPaused }: { delay: number, isPaused: boolean }) => {
169149
x: "-50%",
170150
y: "-50%",
171151
}}
172-
152+
animate={{
153+
opacity: [0.5, 0.9, 0.9, 0.7],
154+
scale: [1.5, 2.5, 2.5, 1.5],
155+
}}
156+
transition={{
157+
repeat: Infinity,
158+
repeatType: "loop",
159+
duration: 19,
160+
ease: ["easeInOut", "circOut"] ,
161+
times: [0, 0.21, 0.58, 1],
162+
delay,
163+
}}
173164
className=" opacity-1 fixed top-1/2 left-1/2
174165
h-[25vw] w-[25vw] rounded-full
175166
bg-gradient-to-br from-[var(--gradient-1-1)] to-[var(--gradient-1-2)]-500/20
176167
shadow-m [#ffcec5]-500/20 overflow-auto"/>
177168
);
178169
};
179170
const Inhale4 = ({ delay, isPaused }: { delay: number, isPaused: boolean }) => {
180-
const [scope, animate] = useAnimate();
181-
const [controls, setControls] = useState<AnimationPlaybackControlsWithThen>()
182-
183-
useEffect(()=>{
184-
const animation = animate(scope.current,{
185-
opacity: [0.3, 0.0, 0.0, 0.1],
186-
scale: [1.5, 3.7, 3.5, 1.5],
187-
}, {
188-
189-
repeat: Infinity,
190-
repeatType: "loop",
191-
duration: 19,
192-
ease: ["easeInOut", "circOut"] ,
193-
times: [0, 0.21, 0.58, 1],
194-
delay,
195-
})
196-
setControls(animation);
197-
}, [animate, delay, scope]);
198-
199-
useEffect(()=>{
200-
if(isPaused){
201-
controls?.pause();
171+
const controls =useAnimation();
172+
useEffect(() => {
173+
controls.start({
174+
});
175+
});
176+
177+
useEffect(() => {
178+
if (isPaused) {
179+
controls.stop();
202180
} else {
203-
controls?.play();
204-
}
205-
},[isPaused, controls])
206-
181+
controls.subscribe();
182+
};
183+
}, [isPaused, controls]);
184+
207185
return (
208186
<motion.span
209-
ref={scope}
210187
style={{
211188
x: "50%",
212189
y: "50%",
@@ -217,7 +194,18 @@ const Inhale4 = ({ delay, isPaused }: { delay: number, isPaused: boolean }) => {
217194
x: "-50%",
218195
y: "-50%",
219196
}}
220-
197+
animate={{
198+
opacity: [0.3, 0.0, 0.0, 0.1],
199+
scale: [1.5, 3.7, 3.5, 1.5],
200+
}}
201+
transition={{
202+
repeat: Infinity,
203+
repeatType: "loop",
204+
duration: 19,
205+
ease: ["easeInOut", "circOut"] ,
206+
times: [0, 0.21, 0.58, 1],
207+
delay,
208+
}}
221209
className=" opacity-1 fixed top-1/2 left-1/2
222210
h-[25vw] w-[25vw] rounded-full
223211
bg-gradient-to-br from-[var(--gradient-1-1)] to-[var(--gradient-1-2)]-500/20

0 commit comments

Comments
 (0)