hateusall Posted July 3, 2020 Share Posted July 3, 2020 I'm trying to make a simple navbar animation, but I'm struggling with the delay. When I have to reverse the animation, it takes too long to start reversing, like 2~3 seconds. I uplodaed a gif and also linked the codepen. See the Pen mdVpBNb by hateusall (@hateusall) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted July 3, 2020 Share Posted July 3, 2020 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: 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. 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. 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! 3 Link to comment Share on other sites More sharing options...
hateusall Posted July 3, 2020 Author Share Posted July 3, 2020 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: 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. 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. 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now