I'm facing a problem with this animation, when I click the add button, it will animate like in the video, but when i click that button again while the previous animation is playing, there will be two animation playing at them same time, that is why when those dots move up to the add button and then later the timelineOpen still playing so it still update the y position making it stay at the same location. I can prenvent it like implement disabled button when timeline is active, but I don’t want it, I want when user click that button whenever they want and the animation if there is one playing it will stop at its position and start another timeline.
import { addButton } from "../utils";
import { useDispatch, useSelector } from "react-redux";
import { addButtonClick } from "../redux/action";
import { buttonSelector } from "../redux/selectors";
import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import { useState } from "react";
function Nav() {
const dispatch = useDispatch();
const status = useSelector(buttonSelector);
const [animationActive, setAnimationActive] = useState(false);
const timelineOpen = gsap.timeline({
paused: true,
});
const timelineClose = gsap.timeline({
paused: true,
});
useGSAP(()=>{
timelineOpen.to("#addButton",{
scale: 0.85,
y: -12,
rotate: 316,
ease: "power1.inOut",
duration: 0.3,
})
timelineOpen.to("#addButton",{
y: 0,
scale: 1,
duration: 0.3,
})
timelineOpen.to(".First",{
y: 0,
scale: 1.3,
duration: 0.1,
},'-=0.4')
timelineOpen.to(".First",{
y: 80,
scale: 1,
duration: 3.2,
ease: "elastic.out(1,0.7)",
}, '-=0.3')
timelineOpen.fromTo(".Second",{
y: 80,
// scaleY: 0,
// duration: 1,
},{
y: 140,
scaleY: 1,
duration: 3.2,
opacity: 1,
ease: "elastic.out(1,0.7)",
}, "-=2.7")
timelineOpen.fromTo(".Third",{
y: 140,
// scaleY: 0,
// duration: 1,
},{
y: 200,
scaleY: 1,
duration: 3.2,
opacity: 1,
ease: "elastic.out(1,0.7)",
}, "-=2.9")
timelineOpen.fromTo(".Fourth",{
y: 200,
// scaleY: 0,
// duration: 1,
},{
y: 260,
scaleY: 1,
duration: 3.2,
opacity: 1,
ease: "elastic.out(1,0.7)",
}, "-=2.9")
timelineOpen.fromTo(".Fith",{
y: 260,
// scaleY: 0,
// duration: 1,
},{
y: 320,
scaleY: 1,
duration: 3.2,
opacity: 1,
ease: "elastic.out(1,0.7)",
onComplete: () => {
setAnimationActive(false);
}
}, "-=2.9")
timelineClose.to("#addButton",{
scale: 1,
rotate: 0,
duration: 0.3,
})
timelineClose.to(".selector",{
y: 0,
duration: 0.7,
stagger: 0.1,
})
if(status){
timelineOpen.play();
// setAnimationActive(true);
}else {
timelineClose.play();
// setAnimationActive(true);
}
},[status])
console.log(animationActive);
const handleAddBtn = () => {
dispatch(addButtonClick());
}
return (
<section className="nav-grid border-r border-[#ececec] flex items-center flex-col row-span-2">
<div className="h-20 flex items-center">
<h4 className="text-xl font-semibold
bg-gradient-to-r from-blue-500 to-fuchsia-600 bg-clip-text text-transparent
">TDNote</h4>
</div>
<div className="notes-container">
<div className="mt-12">
<button
// disabled={animationActive}
onClick={handleAddBtn} id="addButton" className="z-20 rounded-full bg-black border-none w-14 h-14 outline-none relative cursor-pointer flex items-center justify-center">
<img src={addButton} alt="add button" className="w-7 h-7"/>
</button>
</div>
<div className="note-selector flex justify-center relative z-10 -mt-6">
<div className="selector First bg-[#ffcf7d] z-10 !opacity-100 "></div>
<div className="selector other Second bg-[#f0a177] z-[9] "></div>
<div className="selector other Third bg-[#b095f6] z-[8]"></div>
<div className="selector other Fourth bg-[#55cffa] z-[7]"></div>
<div className="selector other Fith bg-[#e6ee96] z-[6]"></div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="gooey-effect" xmlns="http://www.w3.org/2000/svg">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -9" result="gooey-effect"/>
<feComposite in="SourceGraphic" in2="gooey-effect" operator="atop"/>
</filter>
</defs>
</svg>
</section>
);
}
export default Nav;
Screen Recording 2024-03-30 at 22.04.51.mov