I'm excited to reveal to you the most powerful tools in the entire GreenSock Tweening Platform. Everything I have discussed in the last four videos has been custom tailored to prepare you for the awesome power you are about to behold. I'm going to show you two methods that will change the way you approach any script-based animation from this point forward.
With appendMultiple() and insertMultiple() you will have precise control over the sequencing and timing of hundreds of tweens and timelines with very little code.
TimelineLite in Action
In the SWF below, the parent timeline that is being controlled by the scrubber only has two lines of code, yet there are literally over a hundred tweens taking place.
You can find all the files used to create the SWF above in the source files for this tutorial.
Watch the Screencast
Meet appendMultiple()
TimelineLite's appendMultiple() method allows you to add many tweens and/or timelines to a timeline and have precise control over the relative timing of all the tweens/timelines. What makes this method so powerful is that it accepts an array of tweens/timelines and treats them all as single group that can be offset and staggered however you like.
In order to get most out of appendMultiple() you must understand all four parameters.
appendMultiple(tweens:Array, offset:Number = 0, align:String = "normal", stagger:Number = 0):Array
tweens:Array — an Array containing any or all of the following: TweenLite, TweenMax, TimelineLite, and/or TimelineMax instances
offset:Number (default = 0) — Amount of seconds (or frames for frames-based timelines) to offset the insertion point of the tweens from the end of the timeline. For example, to start appending the tweens 3 seconds after the end of the timeline (leaving a 3-second gap), set the offset to 3. Or to have the tweens appended so that the insertion point overlaps with the last 2 seconds of the timeline, set the offset to -2. The default is 0 so that the insertion point is exactly at the end of the timeline.
align:String (default = "normal") — determines how the tweens will be aligned in relation to each other before getting appended. Options are: TweenAlign.SEQUENCE (aligns the tweens one-after-the-other in a sequence), TweenAlign.START (aligns the start times of all of the tweens, ignoring delays), and TweenAlign.NORMAL (aligns the start times of all the tweens, honoring delays). The default is NORMAL.
stagger:Number (default = 0) — staggers the tweens by a set amount of time (in seconds) (or in frames for frames-based timelines). For example, if the stagger value is 0.5 and the "align" property is set to TweenAlign.START, the second tween will start 0.5 seconds after the first one starts, then 0.5 seconds later the third one will start, etc. If the align property is TweenAlign.SEQUENCE, there would be 0.5 seconds added between each tween. Default is 0.
The above descriptions were taken directly from the GreenSock Documentation.
In the video I go over a number of ways to create the array of tweens that appendMultiple() will accept. Below are the two most popular approaches.
Create an Array of Unique Tweens
tl = new TimelineLite();
//bg tween
tl.insert( TweenMax.to( bg, .5, {alpha:1});
tl.appendMultiple( [TweenLite.from( meet_mc, .5, {x:-100, rotation:-90, scaleX:0, scaleY:0, ease:Back.easeOut} ),
TweenLite.from( the_mc, .5, {y:-100, rotation:-90, scaleX:0, scaleY:0, ease:Back.easeOut} ),
TweenLite.from( blobs_mc, .5, {x:700, rotation:90, scaleX:0, scaleY:0, ease:Back.easeOut} ) ],
0, "sequence", .5);
In the code above three tweens added via appendMultiple() will be added immediately after the bg tween ends because the offset value is 0. Each tween will start .5 seconds after the previous tween ends because the align parameter is set to "sequence" and the stagger is set to .5.
Create an Array of Similar Tweens Using allFrom()
TweenMax.allFrom() creates an array of tweens based on an array of objects. It applies the same values to tweens of all the objects in the array. You can also use TweenMax.allTo() if you want to specify where objects should tween to as opposed to where they should tween from.
//create an array of objects to be tweened
allBlobs = [blob1_mc, blob2_mc, blob3_mc, blob4_mc, blob5_mc, blob6_mc, blob7_mc]
tl = new TimelineLite();
//use allFrom() to tween every blob FROM the same set of properties with the same duration.
tl.appendMultiple( TweenMax.allFrom( allBlobs, .3, {scaleX:0, scaleY:0, x:"100"} ), 0, "normal", .1 )
The code above will tween each blob for .3 seconds from the values supplied in the vars object ({scaleX:0, scaleY:0, x:"100"}). Each tween will start .1 second after the previous tween has started because the align mode is set to "normal" and the stagger is .1.
It's important to note that allFrom() returns an array of tweens and that is why we can use it as the value for the tweens parameter in the appendMultiple(). If you were to use allFrom() in an append() you would get an error as it requires a single tween rather than an array of tweens.
TweenAlign Visualizer
Align modes are a bit difficult to understand without seeing them in action. I built the TweenAlign visualizer to give you an easy way to test how they work with a combination of various tween delays, staggers and offsets.
Use the swf above to perform the following tests:
Test 1: Understand the difference between TweenAlign.NORMAL and TweenAlign.START
- Set bar 1 delay to 2
- Toggle between
TweenAlign.NORMALandTweenAlign.START
Notice how the delay is ignored with TweenAlign.START
Test 2: See how the stagger works differently depending on align mode
- Set all tween durations to 1
- Set all tween delays to 0
- Set stagger to 1
- Toggle between TweenAlign.NORMAL and TweenAlign.SEQUENCE
Notice how stagger works differently with TweenAlign.NORMAL and TweenAlign.START:
- Using
TweenAlign.NORMAL, stagger is the amount of time between the start of each tween. - With
TweenAlign.SEQUENCE, stagger is the amount of time between the end of a tween and the next tween.
Go crazy combining different settings and keep an eye on how they effect the start time of each tween and the overall duration of the timeline. The TweenAlign Visualizer is also available in the source files for this tutorial.
Additional Notes
Although I reference appendMultiple() quite a bit in this text, insertMultiple() works virtually the same way. The only difference with insertMultiple() is that the offset parameter refers to an exact time or label at which the tweens/timelines should be added. Read more in the TimelineLite Documentation.
When specifying the align mode you can reference the static contsant value in the TweenAlign class or the string value.
TweenAlign.NORMAL is the same as using "normal".
Conclusion
Once you get a handle on how appendMultiple() and insertMultiple() work you basically have limitless potential for creating elaborate and flexible animations with very little code. I truly hope the demonstration of nesting multiple TimelineLites inspires you to create some truly wonderful effects. By adding just a touch of randomness to each timeline you can really start to take your animations to the next level and maintain an insane amount of control.
Perhaps now you have the knowledge and fortitude to attempt the "starburst" effect that was featured in the Introduction to TimelineLite video? Come to think of it, I'm assigning that challenge to you as homework.
In the next tutorial I am going to be showing some features exclusive to TimelineMax and some other tricks you can do with all your timelines.
If you have any questions or comments on this tutorial simply post a comment below.
Thanks for watching!
Comments