Jump to content
GreenSock

mafox296

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:

obj1.each(function(){

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

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/

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.

Thanks,

Michael

 

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 {

  position:relative;
  display:inline-block;
}

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