[SOLVED] animation get stopped and can't back to original position

[prrrcl]

Hi,

 

Im developing a webapp using react (hooks) and gsap for animations. 

 

i have a toggle burger menu with a Toggle Function. If i click there, animation works, if i click again, burger go back to initial position, but, if i click again, burger doesnt become a X..

 

Why?

https://repl.it/@prrrcl/CulturedDearestProjects

See the Pen by @prrrcl (@@prrrcl) on CodePen

[ZachSaucier]

Hey prrrcl,

 

The main issue is that you're adding to the timeline every time. You should create the timeline animation when it is initialized and then toggle the playing and reversing on click. See the below thread for more info:

 

[prrrcl]

12 minutes ago, ZachSaucier said:

Hey prrrcl,

 

The main issue is that you're adding to the timeline every time. You should create the timeline animation when it is initialized and then toggle the playing and reversing on click. See the below thread for more info:

 

I think ok, but if i want to do 2animations? i mean, open 1, close 2. There are 2 diferents animations for entry and exit. How can i do?

[ZachSaucier]

1 minute ago, prrrcl said:

I think ok, but if i want to do 2animations?

There are multiple ways to do this sort of thing. Not using a timeline is one way, but you may run into trouble if a user double clicks (in which case you would need to kill the previous animation). Having a timeline that has two parts to it and making use of .tweenTo() is another way   

[prrrcl]

5 minutes ago, ZachSaucier said:

There are multiple ways to do this sort of thing. Not using a timeline is one way, but you may run into trouble if a user double clicks (in which case you would need to kill the previous animation). Having a timeline that has two parts to it and making use of .tweenTo() is another way   

I think i gonna die! haha

I haven't got idea how can i use that. I only want to do something like: https://www.cahnwilson.com/ and their code its the same that i put in my repl.it ?

[OSUblake]

5 hours ago, prrrcl said:

my repl.it

 

That is SOOOOOOOoooooooooooo slow, and only works half the time. Please consider using something else next time, like stackblitz or codepen.

 

5 hours ago, ZachSaucier said:

Not using a timeline is one way, but you may run into trouble if a user double clicks

 

That's probably the simplest solution. 

 

See the Pen efa70d648c03a1ffdc5856df23562016 by osublake (@osublake) on CodePen

 

 

[prrrcl]

4 hours ago, OSUblake said:

 

That is SOOOOOOOoooooooooooo slow, and only works half the time. Please consider using something else next time, like stackblitz or codepen.

 

 

That's probably the simplest solution. 

 

 

 

 

 

It's perfect to me! thanks you!!!