[Prevent repeatedly click on restart button]

On 2/28/2019 at 11:04 PM, explorerzip said:

You don't typically show a restart button until the banner is finished playing at least once. You can set your restart button as "visibility: hidden" in css, which prevents mouse clicks. You can use something like TweenLite.set(restart, {visibility: "visible"} or TweenLite.to(restart, 0.5, {AutoAlpha:1}) when you're ready to activate the button.

The AutoAlpha property simultaneously sets opacity: "1" and visibility: "visible"

 

 

Oh yeah, i did think about this. However, i messed up when i used opacity instead of visibility. I will update this as soon as i have the time. 

Thank you

[Prevent repeatedly click on restart button]

3 minutes ago, PointC said:

You've used the tween variable from @Carl's demo. Your timeline variable is tl so please try this:

 

$("button").click(function() {
  if (!tl.isActive()) {
    tl.restart();
  }
});

 

That should work for you. Happy tweening.

It worked,

Strangely enough i was going to edit my previous post about changing tween into tl instead. But after i did that nothing was solved, guess i left out the ! mark.

Thank you so much for this. I will update my codepen so people with the same problem will see it in the future

[Prevent repeatedly click on restart button]

15 minutes ago, Carl said:

Thanks for the demo.

 

This demo below should illustrate clearly how to prevent a tween (or timeline) from restarting by checking its isActive() state

 

See the Pen aMOrMy?editors=1010 by GreenSock (@GreenSock) on CodePen

 

 

and yes, It's fine to just use colored divs instead of images. 

 

 

Thank you for your fast reply.

I tried it with mine, but somehow the restart button stop working.

Here is the new codepen link.

See the Pen vPOwQa by RoyalTulip (@RoyalTulip) on CodePen

 

[Prevent repeatedly click on restart button]

17 minutes ago, GreenSock said:

Welcome to the forums (and GSAP), @Tulip. 

 

It's pretty tough to diagnose what's going on just by looking at a gif - can you provide a super simple codepen? You don't need to even use images - just use simple <div> elements or something.

 

For help with the codepen setup, see 

 

I'm sure once we see it, we'll be able to offer some insight. 

 

Happy tweening!

Hi,

Thank for your quick reply. I just realized that i don't have to put pictures or anything, just a box with color will be enough.

See the Pen vPOwQa by RoyalTulip (@RoyalTulip) on CodePen

Here is the new codepen
I want to know if there is anyone the restart button only work AFTER the animation end. I'm thinking of onComplete but i don't know how to use it properly  

[Prevent repeatedly click on restart button]

Hello, 

I am new to this forum and i'm learning how to use GreenSock. So far my experience with it was enjoyable at least. It is easy to make animation and easy to understand. However, i'm currently having this problem. I made a button but it is clickable even though the animation is not finish.

 

Thank you for reading

 

Edit: Problem Solved, Please add 

$("button").click(function(){
  if(!tl.isActive()){
    tl.restart();
  }
For more information about this isActive, Please refer to this: 

https://greensock.com/docs/TweenLite/isActive

See the Pen vPOwQa by RoyalTulip (@RoyalTulip) on CodePen