Jump to content
Search Community

Animation takes too long to reverse

hateusall test
Moderator Tag

Recommended Posts

Welcome to the forums, @hateusall

 

Hm, the CodePen doesn't seem to have any of that functionality in it - did I miss something? How can I reproduce the issue? 

 

There are definitely some logic problems in your code, though. And some other things:

  1. You're creating a timeline once and then you keep adding more and more and more tweens to it each time the user clicks. You're adding tweens to a completed timeline. Instead, you should just create a new one each time and then when it's done it'll automatically be garbage collected rather than building up in a timeline uselessly. Or (even better) you can just create the animation once and then play()/reverse() it. 
  2. You're using the old syntax. In GSAP 3, there's no need for TimelineMax, TimelineLite, TweenLite, or TweenMax. It's all hung off the "gsap" object. Much simpler. 
  3. You've got a ton of redundant code in there, like for each of the nav elements you're basically doing the same thing. You could greatly simplify your code by either using a loop or a helper function. 

I'd strongly recommend reading this article that was released today because covers a lot of these issues:

 

If you still need some help, we'd be happy to lend a hand but we'll need a little guidance about how to reproduce the issue you're talking about. 

 

Happy tweening!

  • Like 3
Link to comment
Share on other sites

8 hours ago, GreenSock said:

Welcome to the forums, @hateusall

 

Hm, the CodePen doesn't seem to have any of that functionality in it - did I miss something? How can I reproduce the issue? 

 

There are definitely some logic problems in your code, though. And some other things:

  1. You're creating a timeline once and then you keep adding more and more and more tweens to it each time the user clicks. You're adding tweens to a completed timeline. Instead, you should just create a new one each time and then when it's done it'll automatically be garbage collected rather than building up in a timeline uselessly. Or (even better) you can just create the animation once and then play()/reverse() it. 
  2. You're using the old syntax. In GSAP 3, there's no need for TimelineMax, TimelineLite, TweenLite, or TweenMax. It's all hung off the "gsap" object. Much simpler. 
  3. You've got a ton of redundant code in there, like for each of the nav elements you're basically doing the same thing. You could greatly simplify your code by either using a loop or a helper function. 

I'd strongly recommend reading this article that was released today because covers a lot of these issues:

 

If you still need some help, we'd be happy to lend a hand but we'll need a little guidance about how to reproduce the issue you're talking about. 

 

Happy tweening!

 

 

Thank you for the anwser.

 

I'm going to read the article. I'm sorry for codepen, the problem I'm having happens to screen with <1200px and I don't know how to force Codepen to open on mobile version. But it's ok, I'll follow all things you said.

Link to comment
Share on other sites

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.
×
×
  • Create New...