ross333 Posted February 19, 2022 Share Posted February 19, 2022 It is necessary that when clicked, the animation of the menu would work out and when clicked again, the menu would simply close, without reverse. But when you open the menu again, so that the animation is played again. I will be very grateful for your help) It is necessary that after opening the menu, the menuItemsAnimation animation is triggered.And after the menu was closed, it simply left with it, without reverse, so that the user would not wait until it worked.That is, so that it simply works every time it is opened See the Pen JjOpeKm by Ross333 (@Ross333) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted February 19, 2022 Share Posted February 19, 2022 Sure, that should be very possible. You don't even need to reuse the same timeline each time - just dynamically create it each time to animate to whatever values you want. If you need some help, please provide a minimal demo (like a CodePen). 1 Link to comment Share on other sites More sharing options...
ross333 Posted February 19, 2022 Author Share Posted February 19, 2022 thanks for your reply) I attached a link to the CodePen and expanded the description Link to comment Share on other sites More sharing options...
GreenSock Posted February 19, 2022 Share Posted February 19, 2022 Wow, that's a lot of code to go through. I was hoping for a minimal demo If I understand your goal correctly, the thing that is tripping you up is that you're trying to bake everything into timelines that you play() or reverse() but those timelines aren't flexible because they only go from one state to another. Instead, you should build your animations dynamically so that they start from whatever the current state is, and go to the state you want. Think of it sort of like this: menu1.addEventListener("click", () => { let tl = gsap.timeline(); tl.to(...).to(...); // do your animation to this state }); menu2.addEventListener("click", () => { let tl = gsap.timeline(); tl.to(...).to(...); // animate to a different state. }); Or if you really want to have pre-built timelines that you reuse, you could just call .invalidate() on them before you .restart() so that they flush out their starting values and use the current ones. If you still need help, please provide a minimal demo that only has one or two menu items with the simplest possible code to illustrate your scenario/question. 1 Link to comment Share on other sites More sharing options...
ross333 Posted February 19, 2022 Author Share Posted February 19, 2022 I updated the example on CodePen and made it minimal. I want the menu to work according to the example from this site: https://astoncm.com/ That is, menu items appear first and when you close it, they simply disappear along with the menu, without reverse. And the animation was played again when opening Link to comment Share on other sites More sharing options...
mikel Posted February 19, 2022 Share Posted February 19, 2022 Hey @ross333, The simplest: Accelerate the reverse animation with timeScale. Otherwise you need two different animations or ... See the Pen rNWWMGz by mikeK (@mikeK) on CodePen Happy toggling ... Mikel Link to comment Share on other sites More sharing options...
GreenSock Posted February 19, 2022 Share Posted February 19, 2022 This is the basic idea of what I'm talking about: See the Pen xxPWwXQ?editors=0010 by GreenSock (@GreenSock) on CodePen You can make the open and close animations whatever you want - there is no need to do any reversing. I think you'll find it much simpler. 1 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