Jump to content


TweenLite onComplete not working as expected

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

I wrote a simple module to demonstrate the use of a progress bar for downloading files or other server side events.  Everything works as expected except for the timing of the "onComplete" callback attached to the tween.  It appears to execute the callback at the beginning of the animation instead of the end.  I'm sure the issue is with my code but I do not understand why it is happening. To view the issue, press any of the buttons on the codepen page.  I attached an alert at the very end of the progress bar (100%) that freezes the animation.  Note the values of the header text, footer text and bar text.  

See the Pen NAVmxL by hackfin (@hackfin) on CodePen

Link to comment
Share on other sites

I tried looking at your demo but there are 2 big problems.


1: it seems to take 15 seconds or longer for the progress bars to grow after pressing a button

2: there are 400 lines of code.


It just isn't feasible for us to jump in and try to decipher all that having no idea how any of it is supposed to work.


I noticed you are setting onComplete:null in one place but somewhere else you do some stuff in a config object like


onComplete: function (obj) {

I suspect you need to specify separate onCompleteParams values here or that the value of obj is getting lost somewhere. impossible for me to know.


If you could remove all the code that isn't necessary that would really help us help you. I suspect you could pass parameters into a function that creates a tween that doesn't fire the onComplete properly in 10-12 lines of code. We don't need any of the fancy visual stuff.


We'll do our best to help, but its very tough with this much code. Thanks!

  • Like 1
Link to comment
Share on other sites

I will try and make it simple and re-post.  The progress bar rate is a user setting that I slowed down on purpose to demonstrate the issue.  Until then, do you have any good examples on codepen using onCompleteParams?  I am still a novice when it comes to Greensock.



Link to comment
Share on other sites

Sure, here is a very basic example:


//var tween = TweenLite.to(".green", 1, {x:400, onComplete:showMessages("green", "is good")})

var tween = TweenLite.to(".green", 1, {x:400, onComplete:showMessages, onCompleteParams:["green", "is good"]})

function showMessages(message1, message2){
  $("h1").text(message1 + " /// " + message2);



The most important aspect is that onCompleteParams is an Array of parameters that get passed. You must use an Array even if only parameter is needed.

  • Like 1
Link to comment
Share on other sites

Carl, looks like onCompleteParams is my new best friend.  That did the trick and everything is now working as expected.  The multi progress bar in my codepen was my ultimate goal.


Thanks for your help!

Link to comment
Share on other sites

Awesome. Glad you got it working

Link to comment
Share on other sites

  • 3 years later...



if you use 

onComplete:showMessages() <----with the ()

 the function run on startup :( 


the correct code is

onComplete:showMessages <----- without ()


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