Jump to content


TweenLite onComplete triggers immediately

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 there, and thank you for these fine greensock tween engines. Can't imagine how many flash banners I've made importing that com.greensock package.


So let's cut to the chase, I've started using greensock for html-banners as well and ran through a problem.

TweenLite onComplete triggers right away.

I've searched the forums and all but didn't find anything on this.


Here's the (stripped) code that's not working:

function init()
TweenLite.to('#frame1', .3, {opacity: 1, delay: 0, onComplete: arrowLoop, onCompleteParams:[arrow1]})

TweenLite.from('#arrow2', .3, {opacity: 0, top:"-=10",delay: 10, onComplete: arrowLoop, onCompleteParams:[arrow2]})


In arrowLoop(arrow) function I logged the arrow and it traces right away the latter arrow2 twice before the arrowLoop is called for arrow1. If I comment the latter tween out then the arrowLoop works just fine.


This one works correctly:

function init()
TweenLite.to('#frame1', .3, {css:{opacity: 1}, delay: 0})
TweenLite.delayedCall(.5, arrowLoop, [arrow1]);

TweenLite.from('#arrow2', .3, {css:{opacity: 0, top:"-=10px"},delay: 10})
TweenLite.delayedCall(10.3, arrowLoop, [arrow2]);




Link to comment
Share on other sites

Oh, I just notice the syntax is a little different in those code snippets I posted. But don't let that fool you, no change in behavior.

Link to comment
Share on other sites

Hi and thanks for your reply.


I switched to the latest TweenMax you linked but the "bug" didn't go away.

Now the console logs immediately this as I log the arrow in the arrowLoop(arrow) func:

› HTMLElement
<span id=​"arrow1" style=​"z-index:​ 0;​ top:​ auto;​ left:​ auto;​ ">​</span>​
<span id=​"arrow2" style=​"z-index:​ 0;​ top:​ -10px;​ opacity:​ 0;​ left:​ 0px;​ ">​</span>​
<span id=​"arrow1" style=​"z-index:​ 0;​ top:​ auto;​ left:​ 0px;​ ">​</span>​
The HTMLElement is for arrow2, as I collapse the element it reads this (I cut most of it out):
_gsTweenID: "t9"
attributes: NamedNodeMap
outerHTML: "<span id="arrow2" style="z-index: 0; top: -10px; opacity: 0; left: 0px; "></span>"


Afterwards the function seems to work just fine.
Link to comment
Share on other sites

Hmm, I think I found the cause of the problem. If I switch the TweenMax.from into TweenMax.to it works fine. 

Link to comment
Share on other sites

Yes, I apologize for that regression - it only affected from() tweens and it should be fixed in a quick update to 1.9.3 I pushed out 15 minutes ago. The CDN hasn't been updated yet (that takes some time), but the zip and github should have the fix in place. 

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.