Jump to content
GreenSock

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

disabling 2nd, 3nd and 4h tweenlite function when 1st is completed.

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

hi guys,

 

When I click dave btn and steve btn several times quickly, then the green and red boxes are not expanding the size they should. What do I do to fix this problem?

 

And, how to disable either one while another one is in animation?

 

Thanks a lot. 

 

See the Pen AqLEc by 7537247 (@7537247) on CodePen

Link to post
Share on other sites

Hi and welcome to the GreenSock forums,

 

To answer the first part of your problem...

 

When you create a from() tween, the end values are recorded as the current values at the time the tween was created.

 

Lets just stay that element has x:100 and you create this tween

TweenLite.from(element, 1, {x:0, ease:Linear.easeNone});

The first time you create that tween, x will animate FROM 0 to 100 (current value)

 

Halfway through that tween at time of 0.5 seconds the x of element will be 50.

 

If you create another from tween like this again at 0.5 seconds..

TweenLite.from(element, 1, {x:0, ease:Linear.easeNone});

That tween will tween x from 0 to 50 (current x value at time tween was created)

 

This is exactly what is happening when you click fast, you are creating multiple from() tweens with new (and in your case unwanted) end values.

 

Best solution is to force the beginning and end values using fromTo()

 

$('.steve').click(function() {
  TweenLite.fromTo("#steve_box", 1, {scale:0.5, autoAlpha:0},
                   {scale:1, autoAlpha:1});
});

Here is a demo with steve fixed

http://codepen.io/GreenSock/pen/Laxsd

 

As for disabling other buttons, you can try using the TweenMax.isTweening() method to determine if certain objects are animating: http://api.greensock.com/js/com/greensock/TweenMax.html#isTweening()

 

Combining that with some clever JavaScript or jQuery you should be able to disable the buttons you didn't click and then re-enable using an onComplete callback on the tween. 

 

Unfortunately I don't time right now to tinker with all that.

  • Like 1
Link to post
Share on other sites

Very helpful post, another very simple question regarding this this post, where do you put delay? I tried both place, didn't seem work for me.  

Link to post
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.

×