reactjs - React lifecycle events cancel GSAP animation -

i'm trying use gsap react , i'm running situation animation gets cancelled.

my component sidebar appears if 'show' property in state true. inside component, main functions are:

shouldcomponentupdate(nextprops, nextstate) {    return nextstate.show !== this.state.show;  }  componentwillupdate(nextprops, nextstate) {   if (nextstate == true) {     // animate sidebar in   } else {     // animate sidebar out   } }  togglesidebar() {    const newstate = !this.state.show;   this.setstate({ show: newstate }) } 

for reason, when click button trigger togglesidebar function, sidebar begins animate in , animates out.

i have feeling because componentwillupdate returns i'm not sure.

at point, i'm thinking of using transitiongroup , including gsap animation code in componentwillenter / componentwillleave lifecycle hooks can function i'm curious if there's way solve issue.

one common reason togglesidebar gets called twice. happens safari browser, saw cases in chrome browser. either try use e.preventdefault on receiving event button click or use old fashion boolean flag e.g.

togglesidebar() {     if (isanimating) {         isanimating = !isanimating;         return;     }     isanimating = true;     const newstate = !this.state.show;     this.setstate({         show: newstate     }) }