Jump to content
GreenSock

JoePro

disable button on a tweenMax ticker listener

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Good evening All,

 

Just a quick question I have forked a gsap codepen that shows a method of playing timelines and navigating back and forth between them.

 

 

I can't take any credit for this pen, but what i was keen to do was ensure that no further calls to the timeline could be made whilst the tween is active (using the next and prev buttons). I have managed to do this by incorporating a ticker function and checking the tween through its life cycle and it works. I just wonder if there is a better way of doing this. Any advice or other suggestions most welcome i am eager to learn.

 

JoePro  ;)

See the Pen rLoxJJ?editors=1111 by w9914420 (@w9914420) on CodePen

Link to comment
Share on other sites

Hi iProov  :)

 

Welcome to the GreenSock forums.

 

I'm not sure I completely understand your question. Are you asking about the best way to check if a tween is running and prevent any events while it's active? The isActive() method (which you have in your function) is made for that. You don't have to check if the tween is active on every tick. You can simply check if it's active when your click event happens. If it is active, you can then prevent anything else from happening. GreenSock has a nice demo here:

 

See the Pen Pwzomo by GreenSock (@GreenSock) on CodePen

 

More info about the isActive() method:

 

http://greensock.com/docs/#/HTML5/Animation/TweenMax/isActive/

 

Hopefully that helps a little bit.

 

Happy tweening and welcome aboard.

:)

  • Like 3
Link to comment
Share on other sites

Hi PointC

 

Thank you for the links, yes sorry for not being clear on what i was trying to achieve, what I meant was that I want to disable the "prev" button whilst the tween is active, which would stop the user double clicking the button, even though the button is already detecting if the tween is active it was still clickable and I was thinking in terms of user experience that ideally I would not what to give the user a false sense that an additional action was taking place.

 

My button has a simple click event attached that will only allow them to go onto the next label as long as the tween is not active

document.getElementById("prev").onclick = function(){
  
  if (!master.isActive()) {

    master.play("scene" + last);
    console.log("scene" + last);
       
    
  }
 
};

Now this works fine, My ideal case would be to disable this button whilst the tween is active, which makes clear to the user that no further clicking can take place.

 

I hope this makes better sense.

 

Many tnxs for such a warm Welcome :)

 

mr iProov

Link to comment
Share on other sites

Hi OSUblake,

 

Such an elegant solution, I will have a play and get back to you,

 

Thats a great pen by the way ;)

 

regards

 

iiProov

  • Like 1
Link to comment
Share on other sites

Hi OSUblake,

 

Had a play and looked at you code, TweenMax as quite an array of methods that you can call when tweening.

 

I just ensured that both the next button was also disabled whilst tweening and thats it!

 

See the Pen BzrmAv?editors=1010 by w9914420 (@w9914420) on CodePen

 

Many tnxs again

 

Mr iProov

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