GSAP pause issue with React Hooks

[Andres Salazar]

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());
  }

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

The problem is that the method doesn't have access to the updated state since is created again everytime the component is rendered, which happens when the state is updated. The same thing happens with the GSAP instance, on every re-render is created again.

 

The best approach to control GSAP instances using a state property is to store the GSAP instance in a reference (with useRef) so it persists when the component is re-rendered. Finally with a useEffect hook, passing the state property you want to react to as a parameter in the array, toggle the GSAP instance. Something like this:

const [isPlaying, setIsPlaying] = useState(true);
  
/* Creatin Bar Refs */
let bar1 = useRef(null);
let soundRef = useRef(null);
const bar1Anim = useRef(gsap.timeline({ paused: true }));

// This will run only whe the value of isPlaying is updated
useEffect(() => {
  bar1Anim.current.paused(!isPlaying);
  if (isPlaying) {
    soundRef.current.play();
  } else {
    soundRef.current.pause();
  }
}, [isPlaying]);

useEffect(() => {
  bar1Anim.to(bar1.current, 0.2, {
    scaleY: "random(0.2,1)",
    ease: "none",
    yoyo: "true",
    repeat: -1,
    repeatRefresh: true,
  });
}, []);

You can use functional updates directly on your DOM elements to update the component's state, which can be a bit more clearer sometimes.

 

Finally try to update to GSAP 3.x syntax if possible and also try to create a live editable sample, which makes debugging far simple and fast.

 

Happy Tweening!!!