object(IPS\Member)#2753 (29) { ["_followData"]=> NULL ["_previousPhotoType":protected]=> NULL ["_group"]=> NULL ["restrictions":protected]=> NULL ["modPermissions":protected]=> NULL ["calculatedLanguageId":protected]=> NULL ["markers"]=> array(0) { } ["markersResetTimes":protected]=> array(0) { } ["haveAllMarkers":protected]=> bool(false) ["defaultStreamId":protected]=> bool(false) ["changedCustomFields"]=> array(0) { } ["previousName":protected]=> NULL ["_groups":protected]=> NULL ["_socialGroups":protected]=> NULL ["sessionData":protected]=> NULL ["_lang":protected]=> NULL ["_url":protected]=> NULL ["profileFields"]=> NULL ["_reputationData":protected]=> NULL ["_reputationLastDayWon":protected]=> NULL ["_reputationDaysWonCount":protected]=> NULL ["_following":protected]=> array(0) { } ["reportCount":protected]=> NULL ["ignorePreferences":protected]=> NULL ["_ppdLimit":protected]=> NULL ["_data":protected]=> array(15) { ["member_group_id"]=> string(1) "2" ["mgroup_others"]=> string(0) "" ["joined"]=> int(1503223141) ["ip_address"]=> string(13) "23.20.192.147" ["timezone"]=> string(3) "UTC" ["allow_admin_mails"]=> int(1) ["pp_photo_type"]=> string(0) "" ["member_posts"]=> int(0) ["pp_main_photo"]=> NULL ["pp_thumb_photo"]=> NULL ["failed_logins"]=> NULL ["mfa_details"]=> NULL ["pp_reputation_points"]=> int(0) ["signature"]=> string(0) "" ["auto_track"]=> string(47) "{"content":1,"comments":1,"method":"immediate"}" } ["_new":protected]=> bool(true) ["changed"]=> array(8) { ["member_group_id"]=> string(1) "2" ["mgroup_others"]=> string(0) "" ["joined"]=> int(1503223141) ["ip_address"]=> string(13) "23.20.192.147" ["timezone"]=> string(3) "UTC" ["allow_admin_mails"]=> int(1) ["pp_photo_type"]=> string(0) "" ["member_posts"]=> int(0) } ["skipCloneDuplication"]=> bool(false) }

TimelineMax

TimelineMax extends TimelineLite, offering exactly the same functionality plus useful (but non-essential) features like repeat, repeatDelay, yoyo, currentLabel(), addCallback(), removeCallback(), tweenTo(), tweenFromTo(), getLabelAfter(), getLabelBefore(), getActive() (and probably more in the future). It is the ultimate sequencing tool that acts like a container for tweens and other timelines, making it simple to control them as a whole and precisely manage their timing. Without TimelineMax, building complex sequences would be far more cumbersome because you'd need to use the delay special property for every tween which would make future edits far more tedious. Here is a basic example:

TweenLite.to(element, 1, {left:100});
TweenLite.to(element, 1, {top:50, delay:1});
TweenLite.to(element, 1, {opacity:0, delay:2});

The above code animates the element's "left" css property to 100, then "top" to 50, and finally "opacity" to 0 (notice the delay in all but the first tween). But what if you wanted to increase the duration of the first tween to 1.5? You'd need to adjust every delay thereafter. And what if you want to pause() the whole sequence or restart() it or reverse() it on-the-fly or repeat it twice? This becomes quite messy (or flat-out impossible), but TimelineMax makes it incredibly simple:

var tl = new TimelineMax({repeat:2, repeatDelay:1});
tl.add( TweenLite.to(element, 1, {left:100}) );
tl.add( TweenLite.to(element, 1, {top:50}) );
tl.add( TweenLite.to(element, 1, {opacity:0}) );

//then later, control the whole thing...
tl.pause();
tl.resume();
tl.seek(1.5);
tl.reverse();
...

Or use the convenient to() method and chaining to make it even shorter:

var tl = new TimelineMax();
tl.to(element, 1, {left:100}).to(element, 1, {top:50}).to(element, 1, {opacity:0});

Now you can feel free to adjust any of the tweens without worrying about trickle-down changes to delays. Increase the duration of that first tween and everything automatically adjusts.

Here are some other benefits and features of TimelineMax:

  • Things can overlap on the timeline as much as you want. You have complete control over where tweens/timelines are placed. Most other animation tools can only do basic one-after-the-other sequencing but can't allow things to overlap. Imagine appending a tween that moves an object and you want it to start fading out 0.5 seconds before the end of that tween? With TimelineMax it's easy.
  • Add labels, callbacks, play(), stop(), seek(), restart(), and even reverse() smoothly anytime.
  • Nest timelines within timelines as deeply as you want. This means you can modularize your code and make it far more efficient. Imagine building your app with common animateIn() and animateOut() methods that return a tween or timeline instance, then you can string things together like myTimeline.add( myObject.animateIn() ).add( myObject.animateOut(), "+=4").add( myObject2.animateIn(), "-=0.5")...
  • Speed up or slow down the entire timeline with its timeScale() method. You can even tween it to gradually speed up or slow down the animation smoothly.
  • Get or set the progress of the timeline using its progress() or totalProgress() methods. For example, to skip to the halfway point, set myTimeline.progress(0.5);
  • Tween the time(), totalTime(), progress(), or totalProgress() to fastforward/rewind the timeline. You could even attach a slider to one of these to give the user the ability to drag forward/backward through the timeline.
  • Add onComplete, onStart, onUpdate, onRepeat and/or onReverseComplete callbacks using the constructor's vars object like var tl = new TimelineMax({onComplete:myFunction});
  • Kill the tweens of a particular object inside the timeline with kill(null, target) or get the tweens of an object with getTweensOf() or get all the tweens/timelines in the timeline with getChildren()
  • Set the timeline to repeat any number of times or indefinitely. You can even set a delay between each repeat cycle and/or cause the repeat cycles to yoyo, appearing to reverse direction every other cycle.
  • get the active tweens in the timeline with getActive().
  • By passing useFrames:true in the vars parameter, you can base the timing on frames instead of seconds. Please note, however, that the timeline's timing mode dictates its childrens' timing mode as well.
  • Get the currentLabel() or find labels at various positions in the timeline using getLabelAfter() and getLabelBefore()
  • You can export all the tween/timelines from the root (master) timeline anytime into a TimelineLite instance using TimelineLite.exportRoot() so that you can pause() them all orreverse() or alter their timeScale, etc. without affecting tweens/timelines that you create in the future. Imagine a game that has all its animation driven by the GreenSock Animation Platform and it needs to pause or slow down while a status screen pops up. Very easy.

Special Properties and Callbacks

You can optionally use the constructor's vars parameter to configure a TimelineMax with a variety of options.

new TimelineMax({onComplete:myFunction, repeat:2, repeatDelay:1, yoyo:true});

All TimelineMax vars' properties are described below.

Sample code:

//create the timeline that repeats 3 times with 1 second between each repeat and then calls myFunction() when it completes
var tl = new TimelineMax({repeat:3, repeatDelay:1, onComplete:myFunction});
//add a tween
tl.add( TweenLite.to(element, 1, {left:200, top:100}) );

//add another tween at the end of the timeline (makes sequencing easy)
tl.add( TweenLite.to(element, 0.5, {opacity:0}) );

//append a tween using the convenience method to() (shorter syntax) and offset it by 0.5 seconds
tl.to(element, 1, {rotation:30}, "+=0.5");

//reverse anytime
tl.reverse();
//Add a "spin" label 3-seconds into the timeline
tl.addLabel("spin", 3);
//insert a rotation tween at the "spin" label (you could also define the insertion point as the time instead of a label)
tl.add( new TweenLite(element, 2, {rotation:"+=360"}), "spin");

//go to the "spin" label and play the timeline from there
tl.play("spin");
//nest another TimelineMax inside your timeline...
var nested = new TimelineMax();
nested.to(element2, 1, {left:200}));
tl.add(nested);

How do timelines work? What are the mechanics like?

Every animation (tween and timeline) is placed on a parent timeline (except the 2 root timelines - there's one for normal tweens and another for "useFrames" ones). In a sense, they all have their own playheads (that's what its "time" refers to, or "totalTime" which is identical except that it includes repeats and repeatDelays) but generally they're not independent because they're sitting on a timeline whose playhead moves. When the parent's playhead moves to a new position, it updates the childrens' too.

When a timeline renders at a particular time, it loops through its children and says "okay, you should render as if your playhead is at ____" and if that child is a timeline with children, it does the same to its children, right on down the line.

The only exception is when the tween/timeline is paused in which case its internal playhead acts like it's "locked". So in that case, it's possible (likely in fact) that the child's playhead wouldnot be synced with the parent's. When you unpause it (resume()), it essentially picks it up and moves it so that its internal playhead is synchronized with wherever the parent's playhead is at that moment, thus things play perfectly smoothly. That is, unless the timeline's smoothChildTiming is to false in which case it won't move - its startTime will remain locked to where it was.

So basically, when smoothChildTiming is true, the engine will rearrange things on the fly to ensure the playheads line up so that playback is seamless and smooth. The same thing happens when you reverse() or alter the timeScale, etc. But sometimes you might not want that behavior - you prefer to have tight control over exactly where your tweens line up in the timeline - that's when smoothChildTiming:false is handy.

One more example: let's say you've got a 10-second tween that's just sitting on the root timeline and you're 2-seconds into the tween. Let's assume it started at exactly 0 on the root to make this easy, and then when it's at 2-seconds, you do tween.seek(5). The playhead of the root isn't affected - it keeps going exactly as it always did, but in order to make that tween jump to 5 seconds and play appropriately, the tween's startTime gets changed to -3. That way, the tween's playhead and the root playhead are perfectly aligned.

Constructor

TimelineMax( vars:Object ) ;

Constructor.

Properties

Methods

add( value:*, position:*, align:String, stagger:Number ) : *

[override] Adds a tween, timeline, callback, or label (or an array of them) to the timeline.

addCallback( callback:Function, position:*, params:Array, scope:* ) : TimelineMax

Inserts a callback at a particular position.

addLabel( label:String, position:* ) : *

Adds a label to the timeline, making it easy to mark important positions/times.

addPause( position:*, callback:Function, params:Array, scope:* ) : *

Inserts a special callback that pauses playback of the timeline at a particular time or label.

call( callback:Function, params:Array, scope:*, position:* ) : *

Adds a callback to the end of the timeline (or elsewhere using the "position" parameter) - this is a convenience method that accomplishes exactly the same thing as add( TweenLite.delayedCall(...) ) but with less code.

clear( labels:Boolean ) : *

Empties the timeline of all tweens, timelines, and callbacks (and optionally labels too).

currentLabel( value:String ) : *

Gets the closest label that is at or before the current time, or jumps to a provided label (behavior depends on whether or not you pass a parameter to the method).

duration( value:Number ) : *

[override] Gets the timeline's duration or, if used as a setter, adjusts the timeline's timeScale to fit it within the specified duration.

exportRoot( vars:Object, omitDelayedCalls:Boolean ) : TimelineLite

[static] Seamlessly transfers all tweens, timelines, and [optionally] delayed calls from the root timeline into a new TimelineLite so that you can perform advanced tasks on a seemingly global basis without affecting tweens/timelines that you create after the export.

from( target:Object, duration:Number, vars:Object, position:* ) : *

Adds a TweenLite.from() tween to the end of the timeline (or elsewhere using the "position" parameter) - this is a convenience method that accomplishes exactly the same thing as add( TweenLite.from(...) ) but with less code.

fromTo( target:Object, duration:Number, fromVars:Object, toVars:Object, position:* ) : *

Adds a TweenLite.fromTo() tween to the end of the timeline - this is a convenience method that accomplishes exactly the same thing as add( TweenLite.fromTo(...) ) but with less code.

getActive( nested:Boolean, tweens:Boolean, timelines:Boolean ) : Array

Returns the tweens/timelines that are currently active in the timeline, meaning the timeline's playhead is positioned on the child tween/timeline and the child isn't paused.

getChildren( nested:Boolean, tweens:Boolean, timelines:Boolean, ignoreBeforeTime:Number ) : Array

Returns an array containing all the tweens and/or timelines nested in this timeline.

getLabelAfter( time:Number ) : String

Returns the next label (if any) that occurs after the time parameter.

getLabelBefore( time:Number ) : String

Returns the previous label (if any) that occurs before the time parameter.

getLabelsArray( ) : Array

Returns an Array of label objects, each with a "time" and "name" property, in the order that they occur in the timeline.

getLabelTime( label:String ) : Number

Returns the time associated with a particular label.

getTweensOf( target:Object, nested:Boolean ) : Array

Returns the tweens of a particular object that are inside this timeline.

invalidate( ) : *

[override] Clears any initialization data (like starting/ending values in tweens) which can be useful if, for example, you want to restart a tween without reverting to any previously recorded starting values.

progress( value:Number, suppressEvents:Boolean ) : *

[override] Gets or sets the timeline's progress which is a value between 0 and 1 indicating the position of the virtual playhead (excluding repeats) where 0 is at the beginning, 0.5 is halfway complete, and 1 is complete.

recent( ) : Animation

Returns the most recently added child tween/timeline/callback regardless of its position in the timeline.

remove( value:* ) : *

Removes a tween, timeline, callback, or label (or array of them) from the timeline.

removeCallBack( callback:Function, timeOrLabel:* ) : TimelineMax

Removes a callback from a particular position.

removeLabel( label:String ) : *

Removes a label from the timeline and returns the time of that label.

removePause( position:* ) : *

Removes pauses that were added to a timeline via TimelineMax.addPause().

repeat( value:Number ) : *

Gets or sets the number of times that the timeline should repeat after its first iteration.

repeatDelay( value:Number ) : *

Gets or sets the amount of time in seconds (or frames for frames-based timelines) between repeats.

seek( position:*, suppressEvents:Boolean ) : *

[override] Jumps to a specific time (or label) without affecting whether or not the instance is paused or reversed.

set( target:Object, vars:Object, position:* ) : *

Adds a zero-duration tween to the end of the timeline (or elsewhere using the "position" parameter) that sets values immediately (when the virtual playhead reaches that position on the timeline) - this is a convenience method that accomplishes exactly the same thing as add( TweenLite.to(target, 0, {...}) ) but with less code.

shiftChildren( amount:Number, adjustLabels:Boolean, ignoreBeforeTime:Number ) : *

Shifts the startTime of the timeline's children by a certain amount and optionally adjusts labels too.

staggerFrom( targets:Array, duration:Number, vars:Object, stagger:Number, position:*, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteScope:* ) : *

Tweens an array of targets from a common set of destination values (using the current values as the destination), but staggers their start times by a specified amount of time, creating an evenly-spaced sequence with a surprisingly small amount of code.

staggerFromTo( targets:Array, duration:Number, fromVars:Object, toVars:Object, stagger:Number, position:*, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteScope:* ) : *

Tweens an array of targets from and to a common set of values, but staggers their start times by a specified amount of time, creating an evenly-spaced sequence with a surprisingly small amount of code.

staggerTo( targets:Array, duration:Number, vars:Object, stagger:Number, position:*, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteScope:* ) : *

Tweens an array of targets to a common set of destination values, but staggers their start times by a specified amount of time, creating an evenly-spaced sequence with a surprisingly small amount of code.

time( value:Number, suppressEvents:Boolean ) : *

[override] Gets or sets the local position of the playhead (essentially the current time), not including any repeats or repeatDelays.

to( target:Object, duration:Number, vars:Object, position:* ) : *

Adds a TweenLite.to() tween to the end of the timeline (or elsewhere using the "position" parameter) - this is a convenience method that accomplishes exactly the same thing as add( TweenLite.to(...) ) but with less code.

totalDuration( value:Number ) : *

[override] Gets or sets the total duration of the timeline in seconds (or frames for frames-based timelines) including any repeats or repeatDelays.

totalProgress( value:Number, suppressEvents:Boolean ) : *

[override] Gets or sets the timeline's total progress which is a value between 0 and 1 indicating the position of the virtual playhead (including repeats) where 0 is at the beginning, 0.5 is at the halfway point, and 1 is at the end (complete).

tweenFromTo( fromPosition:*, toPosition:*, vars:Object ) : TweenLite

Creates a linear tween that essentially scrubs the playhead from a particular time or label to another time or label and then stops.

tweenTo( position:*, vars:Object ) : TweenLite

Creates a linear tween that essentially scrubs the playhead to a particular time or label and then stops.

useFrames( ) : Boolean

[READ-ONLY] If true, the timeline's timing mode is frames-based instead of seconds.

yoyo( value:Boolean ) : *

Gets or sets the timeline's yoyo state, where true causes the timeline to go back and forth, alternating backward and forward on each repeat.

Copyright 2017, GreenSock. All rights reserved. This work is subject to theterms of useor for Club GreenSock members, the software agreement that was issued with the membership.

Get GSAP

Version: 1.20.2 updated 2017-06-30

Core

    Extras

      Plugins

        By using GreenSock code, you agree to the terms of use.

        Help support GreenSock by becoming a member

        Join Club GreenSock