Hello, I need to pause and unpaused my animation at the same time I changed react state, but when I change react state the animation keeps playing even if I paused it
const [isPlaying, setIsPlaying] = useState(true);
/* Creatin Bar Refs */
let bar1 = useRef(null);
let soundRef = useRef(null);
//Creating timelines
const bar1Anim = new TimelineMax({
paused: false,
});
function music() {
bar1Anim.paused(!bar1Anim.paused());
if (isPlaying) {
soundRef.current.play();
setIsPlaying(!isPlaying);
} else {
soundRef.current.pause();
setIsPlaying(!isPlaying);
}
}
useEffect(() => {
bar1Anim.to(bar1.current, 0.2, {
scaleY: "random(0.2,1)",
ease: "none",
yoyo: "true",
repeat: -1,
repeatRefresh: true,
});
bar1Anim.paused(!bar1Anim.paused());
}, []);
But when Im not changing the react state the animation works at it shoulds, I would be grateful if someone knows what mistake am I making
function music() {
bar1Anim.paused(!bar1Anim.paused());
}
