gsap timeline reverse/play not working - hamburger svg animation

[johnmathew_247]

here is my codesandbox link : https://codesandbox.io/s/gsap-timeline-reverse-play-vfsu9

 

relevent code:

components> nav.js> line:40 to line:77 and line:92

 

bugs: 

i cant seem to reverse the animation once it is played,

and the animation is played even if i dont use any play function,

eventhough i havent mentioned the animation on button click, when i click it plays anyway.

 

 

[GreenSock]

It's a bit difficult to troubleshoot when there are so many files and things to navigate (I'm not sure exactly where that animation is visually or how to trigger it without reading through all the code and trying to grasp the structure - it's always best to just provide a minimal demo as a simple CodePen if possible). 

 

Animations always play by default, but you can pause them initially with paused: true in the vars object (or just call .pause() on the instance). 

let tl = gsap.timeline({paused: true});

 

Does that clear things up? 

[OSUblake]

5 hours ago, johnmathew_247 said:

i cant seem to reverse the animation once it is played,

 

Please go through our React Guides. Animations should ALWAYS be created with a hook.