Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
dada78

Best way to stagger and then reverse

Recommended Posts

Hi,

I haven't used the stagger function much but would like to take advantage of it.

 

I have the following:

//create the timeline
var tlNav:TimelineLite = new TimelineLite();
var clips:Array = [clip1, clip2, clip3, clip4, clip5];


//Thumbs are coming in
tlNav.staggerTo(clips, .5, {y:755, alpha:1}, 0.2)


which works as expected, but what I need to accomplish is to have all the icons go back down a split second after they moved up, like so: tlNav.staggerTo(clips, .5, {y:794}, 0.2) but can't figure out how to achieve this, since I am not sure how to cut into the started stagger tween in order to start animating the clips down in the same order. They should just pop up staggered and back down right after they have popped up. Perhaps I am overthinking things...

 

Also when to use the TimelineLite and TimelineMax stagger methods? I am a bit confused about that.

 

Thanks guys!

Link to comment
Share on other sites

I figured it out:

tlNav.staggerTo(clips, .3, {y:755, alpha:1}, 0.1)
     .staggerTo(clips, .3, {y:794}, 0.1, "=-.3")
  • Like 1
Link to comment
Share on other sites

Hi Carl,

how would I be able to reverse the staggered clip direction so that the following line would play the clips in reversed order (starting with clip5,..):

 .staggerTo(clips, .3, {y:794}, 0.1, "=-.3")

I guess I could add:

var clipsReverse:Array = [clip5, clip4, clip3, clip2, clip1];

 but was wondering if there is a way to use the reverse call for this?

 

Thanks!

Link to comment
Share on other sites

Hi Karina

 

What you can do is pass the reversed array into a staggerTo like this

 

import com.greensock.*;
import com.greensock.easing.*;

var clips = [clip1, clip2, clip3];

var tl = new TimelineLite();

tl.staggerTo(clips, 1, {x:200}, 0.5)
  .staggerTo(clips.reverse(), 1, {alpha:0}, 1);

I've attached an 2014 cc fla for you to test

 

Here are 2 more chunks of code that you can paste into that fla to see some different staggered animations

 

repeating TweenMax tweens

var clips = [clip1, clip2, clip3];

var tl = new TimelineLite();

//loop through the array and add repeating TweenMax tweens
for (var i:int = 0; i < clips.length; i++) {
  tl.add(TweenMax.to(clips[i], 1, {x:200, repeat:1, repeatDelay:0.2, yoyo:true}), i * 0.5); 
}

repeating TimelineMax:

var clips = [clip1, clip2, clip3];

//create a TimelineMax that repeats
var tl = new TimelineMax({repeat:1, repeatDelay:0.5, yoyo:true})
tl.staggerTo(clips, 1, {x:200}, 0.5)

--

 

As far as when you should use TweenMax.staggerTo() vs TimelineLite/Max.staggerTo(), you should use the timeline ones if you need to play(), pause(), resume() or control the sequence in any way.

 

TweenMax.staggerTo() just creates an Array of tweens with offset start times. Once they are created it isn't easy to communicate with them. 

 

Hope this helps. Let me know if you have more questions.

 

 

 

reverseArray.fla.zip

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