Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Tulip

Prevent repeatedly click on restart button

Recommended Posts

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

Edited by Tulip
Problem solved, editing for people who has same problem
Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

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  

Link to comment
Share on other sites

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. 

 

 

  • Like 3
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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"

 

 

  • Like 2
Link to comment
Share on other sites

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

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