Jump to content


completion of a set of tweens

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

Where do I place onComplete:someFunction, or how do I use some other way of finding when a set of tweens have finished when the tweens are executed within an each loop.

for example:


                TweenMax.fromTo(this, 3, {opacity:0, .....}, {...}) ;        


Link to comment
Share on other sites

The easiest way would be to put all the tweens in a timeline and give the timeline an onComplete like

var tl = new TimelineLite({onComplete:allDone})

               tl.fromTo(this, 3, {opacity:0, .....}, {...}, 0) ;        

function allDone(){

  alert("all done");

I'm assuming from the partial snippet you provided that all tweens have the same duration and start at the same time.


It really helps if you provide a reduced test case using CodePen so that we can provide more efficient, working responses.


Link to comment
Share on other sites

As suggested I added an onComplete to the time line constructor, which accumplished what I wanted. I have also made a simple codePen. I put in a delay of 3 seconds which is what I would do if I were displaying an imge for 3 seconds. I notice that the move and the scale commands are not obeyed. I don't understand this.




See the Pen MaYGBY by mafox (@mafox) on CodePen

Link to comment
Share on other sites

I noticed this:

left: "+=100 * x",

What exactly are you trying to do there? It's invalid. Are you trying to do this maybe?:

left: "+=" + (100 * x),

You've gotta do the math outside the string. The way  you wrote it is just a literal string rather than executable math. 


Oh, and you capitalized "Delay" but you shouldn't. JavaScript is case-sensitive. 

  • Like 1
Link to comment
Share on other sites

other issues seem to be:


  1. you are trying to change the left position, but in order to do that you need to make sure your elements have position:relative, absolute or fixed
  2. you are trying to scale a span. According to the css specs you can't apply transforms to inline elements.

The solution is to create css rule that gives your span

span {


This a demo that works http://codepen.io/GreenSock/pen/KdwxyL feel free to change the values.

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