Jump to content
GreenSock

prrrcl

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

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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:

 

  • Like 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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  :) 

  • Like 3
Link to comment
Share on other sites

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 ?

Link to comment
Share on other sites

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

 

 

Link to comment
Share on other sites

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!!!

Link to comment
Share on other sites

  • prrrcl changed the title to [SOLVED] animation get stopped and can't back to original position

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×