completion of a set of tweens

[mafox296 1 Likes (Newbie)]

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:

obj1.each(function(){

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

              });

[alwayzambitious 54 Likes (Contributor)]

right next to 0,

[Carl 9,066 Likes (Superhero)]

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})

obj1.each(function(){
               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.

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

[mafox296 1 Likes (Newbie)]

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.

Thanks,

Michael

 

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

[GreenSock 8,117 Likes (Superhero)]

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. 

[Carl 9,066 Likes (Superhero)]

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 {

  position:relative;
  display:inline-block;
}

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