Jump to content
Search Community

How can I restart the animation?

ross333 test
Moderator Tag

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

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

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