Clueless on how to wait for animation to finish in React using context

[tailbreezy]

This is rather important functionality, and every library has it. 

With gsap I am quite clueless on how to achieve this. It may be more of a question about React though, but since it is the defacto FE framework, I think it is important to provide a sanctioned way of doing this.

 

I am talking about the situation where you set up a context with an animation, say a sidebar. Then by clicking a button you toggle it, which plays the animation but when you close it, since the state is controlled by a variable, it immediately disappears, which is expected but not wanted behavior.

 

Framer motion solves this situation by providing a AnimatePresence with exitBeforeEnter attribute.

 

I have read the docs and especially the three articles regarding React a few times, but failed to see where you solve this super common situation.

 

Regards

[Cassie]

Heya!

Two options here, first would be to use an onComplete

gsap.to(".box", {
  x: "random(-300, 300, 5)",
  onComplete: () => {
    // change state
  }
});

See the Pen d47c41b09db0c667a1609bce98a5b6f5 by GreenSock (@GreenSock) on CodePen

Or use FLIP and tap into the exit animations

See the Pen MWmqzjE by GreenSock (@GreenSock) on CodePen

We cover both in more detail here - 

https://greensock.com/react-advanced#exits

Hope this helps!