Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Enzo Ustariz

Prevent spamming Timeline

Recommended Posts

Hello everyone,

I'm creating an animated menu with CSS Grid / Greensock.

My animation is triggered by an event 'click'.

The animation run pretty well, but if the user spam click the open button for whatever reason, the animation repeat itself very strangely.

The solution I found is to not use Timeline, since they are repeated when we click multiple times on the open btn.

But i'm pretty sure there is a more elegant / convenient solution.


Can you give me a hand ? 

Thank's alot.

See the Pen GRKPbOr by Ziratsu (@Ziratsu) on CodePen

Share this post

Link to post
Share on other sites

Hey Enzo,


The biggest issue is that your timelines are in conflict with each other. Secondarily, instead of adding to the timeline each time the button is clicked. You should instead create a timeline animation when everything is initialized and then play(), reverse(), or tweenTo() depending on your needs.


You'll need to restructure your animation to handle conflicts or wait until the animations complete like Mikel suggested. 


I'd do something like this: 


See the Pen mdbvyZQ?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 3
  • Thanks 1

Share this post

Link to post
Share on other sites

Wow, that is so great Zach !

Thank's a lot for this help I really appreciate.

Have a nice day.


Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.