TimelineLite is a lightweight, intuitive timeline class for building and managing sequences of TweenLite, TweenMax, TimelineLite, and/or TimelineMax instances. You can think of a TimelineLite instance like a container where you place tweens (or other timelines) over the course of time.
-
build sequences easily by adding tweens with methods like
to()
,from()
,staggerFrom()
,add()
, and more. - tweens can overlap as much as you want and you have complete control over where they get placed on the timeline.
-
add labels,
play()
,stop()
,seek()
,restart()
, and evenreverse()
smoothly anytime. - nest timelines within timelines as deeply as you want.
-
set the progress of the timeline using its
progress()
method. For example, to skip to the halfway point, setmyTimeline.progress(0.5);
-
tween the
time()
orprogress()
values to fastforward/rewind the timeline. You could even attach a slider to one of these properties to give the user the ability to drag forwards/backwards through the timeline. -
speed up or slow down the entire timeline using
timeScale()
. You can even tween this property to gradually speed up or slow down. -
add
onComplete
,onStart
,onUpdate
, and/oronReverseComplete
callbacks using the constructor’svars
object. -
use the powerful
add()
method to add labels, callbacks, tweens and timelines to a timeline. - base the timing on frames instead of seconds if you prefer. Please note, however, that the timeline’s timing mode dictates its childrens’ timing mode as well.
-
kill the tweens of a particular object with
killTweensOf()
or get the tweens of an object withgetTweensOf()
or get all the tweens/timelines in the timeline withgetChildren()
-
If you need even more features like,
repeat()
,repeatDelay()
,yoyo()
,currentLabel()
,getLabelsArray()
,getLabelAfter()
,getLabelBefore()
,getActive()
,tweenTo()
and more, check out TimelineMax which extends TimelineLite.
Sample Code
//instantiate a TimelineLite var tl = new TimelineLite(); //add a from() tween at the beginning of the timline tl.from(head, 0.5, {left:100, opacity:0}); //add another tween immediately after tl.from(subhead, 0.5, {left:-100, opacity:0}); //use position parameter "+=0.5" to schedule next tween 0.5 seconds after previous tweens end tl.from(feature, 0.5, {scale:.5, autoAlpha:0}, "+=0.5"); //use position parameter "-=0.5" to schedule next tween 0.25 seconds before previous tweens end. //great for overlapping tl.from(description, 0.5, {left:100, autoAlpha:0}, "-=0.25"); //add a label 0.5 seconds later to mark the placement of the next tween tl.add("stagger", "+=0.5") //to jump to this label use: tl.play("stagger"); //stagger the animation of all icons with 0.1s between each tween's start time //this tween is added tl.staggerFrom(icons, 0.2, {scale:0, autoAlpha:0}, 0.1, "stagger");
Demo
See the Pen TimelineLite Control : new GS.com by GreenSock (@GreenSock) on CodePen.
Watch
The video below will walk you through the types of problems TimelineLite solves and illustrate the flexibility and power of our core sequencing tool.
Learn more in the TimelineLite docs. For even more sequencing power and control take a look at TimelineMax.
Recommended Comments
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 accountSign in
Already have an account? Sign in here.
Sign In Now