Jump to content
GreenSock

ross333

How can I restart the animation?

Recommended Posts

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

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

  • Like 1
Link to comment
Share on other sites

thanks for your reply)
I attached a link to the CodePen and expanded the description

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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

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

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. 

  • Like 1
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.
×