1021 lines
125 KiB
HTML
Executable File
1021 lines
125 KiB
HTML
Executable File
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!-- saved from url=(0014)about:internet --><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" href="../../style.css" type="text/css" media="screen"><link rel="stylesheet" href="../../print.css" type="text/css" media="print"><link rel="stylesheet" href="../../override.css" type="text/css"><meta name="keywords" content="TimelineMax,com.greensock.TimelineMax,addCallback,addLabel,append,appendMultiple,call,clear,currentLabel,delayedCall,delayedCall,duration,exportRoot,from,from,from,fromTo,fromTo,fromTo,getActive,getAllTweens,getChildren,getLabelAfter,getLabelBefore,getLabelTime,getLabelsArray,getTweensOf,getTweensOf,getTweensOf,insert,insertMultiple,invalidate,invalidate,invalidate,invalidate,isTweening,killAll,killChildTweensOf,killDelayedCallsTo,killDelayedCallsTo,killTweensOf,killTweensOf,pauseAll,progress,progress,progress,remove,removeCallback,removeLabel,repeat,repeat,repeatDelay,repeatDelay,resumeAll,seek,set,set,set,shiftChildren,staggerFrom,staggerFrom,staggerFromTo,staggerFromTo,staggerTo,staggerTo,stop,time,time,to,to,to,totalDuration,totalDuration,totalDuration,totalProgress,totalProgress,tweenFromTo,tweenTo,updateTo,usesFrames,yoyo,yoyo"><title>com.greensock.TimelineMax</title><script src="../../AC_OETags.js" type="text/javascript"></script></head><body><script language="javascript" type="text/javascript" src="../../asdoc.js"></script><script language="javascript" type="text/javascript" src="../../help.js"></script><script language="javascript" type="text/javascript" src="../../cookies.js"></script><script language="javascript" type="text/javascript"><!--
|
|
asdocTitle = 'TimelineMax - GreenSock JavaScript Documentation';
|
|
var baseRef = '../../';
|
|
window.onload = configPage;
|
|
--></script>
|
|
<script type="text/javascript">
|
|
scrollToNameAnchor();
|
|
</script><table class="titleTable" cellpadding="0" cellspacing="0" id="titleTable" style="display:none"><tr><td class="titleTableTitle" align="left">GreenSock JavaScript API Docs</td><td class="titleTableTopNav" align="right"><a href="../../package-summary.html" onclick="loadClassListFrame('../../all-classes.html')">All Packages</a> | <a href="../../class-summary.html" onclick="loadClassListFrame('../../all-classes.html')">All Classes</a> | <a href="../../all-index-A.html" onclick="loadClassListFrame('../../index-list.html')">Index</a> | <a id="framesLink1" href="../../index.html?com/greensock/TimelineMax.html&com/greensock/class-list.html">Frames</a><a id="noFramesLink1" style="display:none" href="" onclick="parent.location=document.location"> No Frames </a></td><td class="titleTableLogo" align="right" rowspan="3"><img src="../../images/logo.jpg" class="logoImage" alt=" Adobe Logo " title=" Adobe Logo "></td></tr><tr class="titleTableRow2"><td class="titleTableSubTitle" id="subTitle" align="left">TimelineMax</td><td class="titleTableSubNav" id="subNav" align="right"><a href="#propertySummary">Properties</a> | <a href="#methodSummary">Methods</a> | <a href="#includeExamplesSummary">Examples</a></td></tr><tr class="titleTableRow3"><td colspan="3"> </td></tr></table><script language="javascript" type="text/javascript" xml:space="preserve">
|
|
<!--
|
|
|
|
if (!isEclipse() || window.name != ECLIPSE_FRAME_NAME) {titleBar_setSubTitle("TimelineMax"); titleBar_setSubNav(false,true,false,false,false,false,false,false,true,true,false ,false,false,false,false,false);}
|
|
-->
|
|
</script><div xmlns:fn="http://www.w3.org/2005/xpath-functions" class="MainContent"><table class="classHeaderTable" cellpadding="0" cellspacing="0"><tr><td class="classHeaderTableLabel">Package</td><td><a href="package-detail.html" onclick="javascript:loadClassListFrame('class-list.html')">com.greensock</a></td></tr><tr><td class="classHeaderTableLabel">Class</td><td class="classSignature">public class TimelineMax</td></tr><tr><td class="classHeaderTableLabel">Inheritance</td><td class="inheritanceList">TimelineMax <img src="../../images/inherit-arrow.gif" title="Inheritance" alt="Inheritance" class="inheritArrow"> <a href="../../com/greensock/TimelineLite.html">TimelineLite</a> <img src="../../images/inherit-arrow.gif" title="Inheritance" alt="Inheritance" class="inheritArrow"> <a href="../../com/greensock/core/SimpleTimeline.html">SimpleTimeline</a> <img src="../../images/inherit-arrow.gif" title="Inheritance" alt="Inheritance" class="inheritArrow"> <a href="../../com/greensock/core/Animation.html">Animation</a> <img src="../../images/inherit-arrow.gif" title="Inheritance" alt="Inheritance" class="inheritArrow"> Object</td></tr></table><p></p><p></p><p></p>
|
|
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
|
|
(or its little brother TimelineLite), building complex sequences would be far more cumbersome
|
|
because you'd need to use the <code>delay</code> special property for everything which would
|
|
make future edits far more tedius. Here is a basic example:
|
|
<div class="listing" version="3.0"><pre>
|
|
TweenLite.to(element, 1, {css:{left:100}});
|
|
TweenLite.to(element, 1, {css:{top:50}, delay:1});
|
|
TweenLite.to(element, 1, {css:{opacity:0}, delay:2});
|
|
</pre></div>
|
|
The above code animates the element's "left" css property to 100, then "top" to 50, and finally
|
|
"opacity" to 0 (notice the <code>delay</code> in all but the first tween). But
|
|
imagine 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 <code>pause()</code> the whole
|
|
sequence or <code>restart()</code> it or <code>reverse()</code> it on-the-fly or repeat
|
|
it twice? This becomes quite messy (or flat-out impossible), but TimelineMax makes it
|
|
incredibly simple:
|
|
|
|
<div class="listing" version="3.0"><pre>
|
|
var tl = new TimelineMax({repeat:2, repeatDelay:1});
|
|
tl.append( TweenLite.to(element, 1, {css:{left:100}}) );
|
|
tl.append( TweenLite.to(element, 1, {css:{top:50}}) );
|
|
tl.append( TweenLite.to(element, 1, {css:{opacity:0}}) );
|
|
|
|
//then later, control the whole thing...
|
|
tl.pause();
|
|
tl.resume();
|
|
tl.seek(1.5);
|
|
tl.reverse();
|
|
...
|
|
</pre></div>
|
|
Or use the convenient <code>to()</code> method and chaining to make it even shorter:
|
|
<div class="listing" version="3.0"><pre>
|
|
var tl = new TimelineMax();
|
|
tl.to(element, 1, {css:{left:100}}).to(element, 1, {css:{top:50}}).to(element, 1, {css:{opacity:0}});
|
|
</pre></div>
|
|
|
|
<p>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.</p>
|
|
|
|
<p>Here are some other benefits and features of TimelineMax:</p>
|
|
|
|
<ul>
|
|
<li> 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.</li>
|
|
|
|
<li> Add labels, callbacks, play(), stop(), seek(), restart(), and even reverse() smoothly anytime.</li>
|
|
|
|
<li> 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
|
|
<code>myTimeline.append( myObject.animateIn() ).append( myObject.animateOut(), 4).append( myObject2.animateIn(), -0.5)...</code>
|
|
</li>
|
|
|
|
<li> Speed up or slow down the entire timeline with its <code>timeScale()</code> method.
|
|
You can even tween it to gradually speed up or slow down the animation smoothly.</li>
|
|
|
|
<li> Get or set the progress of the timeline using its <code>progress()</code> or
|
|
<code>totalProgress()</code> methods. For example, to skip to the halfway point,
|
|
set <code>myTimeline.progress(0.5);</code>
|
|
</li>
|
|
|
|
<li> Tween the <code>time, totalTime, progress,</code> or <code>totalProgress</code> 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.</li>
|
|
|
|
<li> Add <code>onComplete, onStart, onUpdate, onRepeat</code> and/or <code>onReverseComplete</code>
|
|
callbacks using the constructor's <code>vars</code> object like
|
|
<code>var tl = new TimelineMax({onComplete:myFunction});</code>
|
|
</li>
|
|
|
|
<li> Kill the tweens of a particular object inside the timeline with <code>killTweensOf()</code>
|
|
or get the tweens of an object with <code>getTweensOf()</code> or get all the tweens/timelines
|
|
in the timeline with <code>getChildren()</code>
|
|
</li>
|
|
|
|
<li> 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. </li>
|
|
|
|
<li> listen for START, UPDATE, REPEAT, REVERSE_COMPLETE, and COMPLETE events.</li>
|
|
|
|
<li> get the active tweens in the timeline with getActive().</li>
|
|
|
|
<li> By passing <code>useFrames:true</code> in the <code>vars</code> 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. </li>
|
|
|
|
<li> Get the <code>currentLabel()</code> or find labels at various positions in the timeline
|
|
using <code>getLabelAfter()</code> and <code>getLabelBefore()</code>
|
|
</li>
|
|
|
|
<li> You can export all the tween/timelines from the root (master) timeline anytime into
|
|
a TimelineLite instance using <code>TimelineLite.exportRoot()</code> so that
|
|
you can <code>pause()</code> them all or <code>reverse()</code> or alter their
|
|
<code>timeScale</code>, 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.</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<p>
|
|
<b>SPECIAL PROPERTIES:</b>
|
|
</p>
|
|
<p>You can optionally use the constructor's <code>vars</code> parameter to define any of
|
|
the special properties below (syntax example: <code>new TimelineMax({onComplete:myFunction, repeat:2, repeatDelay:1, yoyo:true});</code>
|
|
</p>
|
|
|
|
<ul>
|
|
<li>
|
|
<b> delay </b>:<i> Number</i> -
|
|
Amount of delay in seconds (or frames for frames-based tweens) before the timeline should begin.</li>
|
|
|
|
<li>
|
|
<b> paused </b>:<i> Boolean</i> -
|
|
If <code>true</code>, the timeline will pause itself immediately upon creation (by default,
|
|
timelines automatically begin playing immediately). If you plan to create a TimelineMax and
|
|
then populate it later (after one or more frames elapse), it is typically best to set
|
|
<code>paused:true</code> and then <code>play()</code> after you populate it.</li>
|
|
|
|
<li>
|
|
<b> onComplete </b>:<i> Function</i> -
|
|
A function that should be called when the timeline has completed</li>
|
|
|
|
<li>
|
|
<b> onCompleteParams </b>:<i> Array</i> -
|
|
An Array of parameters to pass the <code>onComplete</code> function. For example,
|
|
<code>new TimelineMax({onComplete:myFunction, onCompleteParams:["param1", "param2"]});</code>
|
|
To self-reference the timeline instance itself in one of the parameters, use <code>"{self}"</code>,
|
|
like: <code>onCompleteParams:["{self}", "param2"]</code>
|
|
</li>
|
|
|
|
<li>
|
|
<b> onCompleteScope </b>:<i> Object</i> -
|
|
Defines the scope of the onComplete function (what <code>"this"</code> refers to inside that function).</li>
|
|
|
|
<li>
|
|
<b> useFrames </b>:<i> Boolean</i> -
|
|
If <code>useFrames</code> is <code>true</code>, the timelines's timing will be
|
|
based on frames instead of seconds because it is intially added to the root
|
|
frames-based timeline. This causes both its <code>duration</code>
|
|
and <code>delay</code> to be based on frames. An animations's timing mode is
|
|
always determined by its parent <code>timeline</code>.</li>
|
|
|
|
<li>
|
|
<b> tweens </b>:<i> Array</i> -
|
|
To immediately insert several tweens into the timeline, use the <code>tweens</code>
|
|
special property to pass in an Array of TweenLite/TweenMax/TimelineLite/TimelineMax
|
|
instances. You can use this in conjunction with the <code>align</code> and
|
|
<code>stagger</code> special properties to set up complex sequences with minimal code.
|
|
These values simply get passed to the <code>insertMultiple()</code> method.</li>
|
|
|
|
<li>
|
|
<b> align </b>:<i> String</i> -
|
|
Only used in conjunction with the <code>tweens</code> special property when multiple
|
|
tweens are to be inserted immediately. The value simply gets passed to the
|
|
<code>insertMultiple()</code> method. The default is <code>"normal"</code>.
|
|
Options are:
|
|
<ul>
|
|
<li>
|
|
<b>
|
|
<code>"sequence"</code>
|
|
</b>: aligns the tweens one-after-the-other in a sequence</li>
|
|
<li>
|
|
<b>
|
|
<code>"start"</code>
|
|
</b>: aligns the start times of all of the tweens (ignores delays)</li>
|
|
<li>
|
|
<b>
|
|
<code>"normal"</code>
|
|
</b>: aligns the start times of all the tweens (honors delays)</li>
|
|
</ul>
|
|
The <code>align</code> special property does <b>not</b> force all child
|
|
tweens/timelines to maintain relative positioning, so for example, if you use
|
|
<code>"sequence"</code> and then later change the duration of one of the nested tweens,
|
|
it does <b>not</b> force all subsequent timelines to change their position.
|
|
The <code>align</code> special property only affects the alignment of the tweens that are
|
|
initially placed into the timeline through the <code>tweens</code> special property of
|
|
the <code>vars</code> object.</li>
|
|
|
|
<li>
|
|
<b> stagger </b>:<i> Number</i> -
|
|
Only used in conjunction with the <code>tweens</code> special property when multiple
|
|
tweens are to be inserted immediately. It staggers the tweens by a set amount of time
|
|
in seconds (or in frames if <code>useFrames</code> is true). For example, if the
|
|
stagger value is 0.5 and the "align" property is set to <code>"start"</code>, 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 <code>"sequence"</code>,
|
|
there would be 0.5 seconds added between each tween. This value simply gets
|
|
passed to the <code>insertMultiple()</code> method. Default is 0.</li>
|
|
|
|
<li>
|
|
<b> onStart </b>:<i> Function</i> -
|
|
A function that should be called when the timeline begins (when its <code>time</code>
|
|
changes from 0 to some other value which can happen more than once if the
|
|
timeline is restarted multiple times).</li>
|
|
|
|
<li>
|
|
<b> onStartParams </b>:<i> Array</i> -
|
|
An Array of parameters to pass the <code>onStart</code> function. For example,
|
|
<code>new TimelineMax({onStart:myFunction, onStartParams:["param1", "param2"]});</code>
|
|
To self-reference the timeline instance itself in one of the parameters, use <code>"{self}"</code>,
|
|
like: <code>onStartParams:["{self}", "param2"]</code>
|
|
</li>
|
|
|
|
<li>
|
|
<b> onStartScope </b>:<i> Object</i> -
|
|
Defines the scope of the onStart function (what <code>"this"</code> refers to inside that function).</li>
|
|
|
|
<li>
|
|
<b> onUpdate </b>:<i> Function</i> -
|
|
A function that should be called every time the timeline updates
|
|
(on every frame while the timeline is active)</li>
|
|
|
|
<li>
|
|
<b> onUpdateParams </b>:<i> Array</i> -
|
|
An Array of parameters to pass the <code>onUpdate</code> function. For example,
|
|
<code>new TimelineMax({onUpdate:myFunction, onUpdateParams:["param1", "param2"]});</code>
|
|
To self-reference the timeline instance itself in one of the parameters, use <code>"{self}"</code>,
|
|
like: <code>onUpdateParams:["{self}", "param2"]</code>
|
|
</li>
|
|
|
|
<li>
|
|
<b> onUpdateScope </b>:<i> Object</i> -
|
|
Defines the scope of the onUpdate function (what <code>"this"</code> refers to inside that function).</li>
|
|
|
|
<li>
|
|
<b> onReverseComplete </b>:<i> Function</i> -
|
|
A function that should be called when the timeline has reached its beginning again from the
|
|
reverse direction. For example, if <code>reverse()</code> is called, the timeline will move
|
|
back towards its beginning and when its <code>time</code> reaches 0, <code>onReverseComplete</code>
|
|
will be called. This can also happen if the timeline is placed in a TimelineLite or TimelineMax
|
|
instance that gets reversed and plays the timeline backwards to (or past) the beginning.</li>
|
|
|
|
<li>
|
|
<b> onReverseCompleteParams </b>:<i> Array</i> -
|
|
An Array of parameters to pass the <code>onReverseComplete</code> function. For example,
|
|
<code>new TimelineMax({onReverseComplete:myFunction, onReverseCompleteParams:["param1", "param2"]});</code>
|
|
To self-reference the timeline instance itself in one of the parameters, use <code>"{self}"</code>,
|
|
like: <code>onReverseCompleteParams:["{self}", "param2"]</code>
|
|
</li>
|
|
|
|
<li>
|
|
<b> onReverseCompleteScope </b>:<i> Object</i> -
|
|
Defines the scope of the onReverseComplete function (what <code>"this"</code> refers to inside that function).</li>
|
|
|
|
<li>
|
|
<b> autoRemoveChildren </b>:<i> Boolean</i> -
|
|
If <code>autoRemoveChildren</code> is set to <code>true</code>, as soon as child
|
|
tweens/timelines complete, they will automatically get killed/removed. This is normally
|
|
undesireable because it prevents going backwards in time (like if you want to
|
|
<code>reverse()</code> or set the <code>progress</code> lower, etc.). It can, however,
|
|
improve speed and memory management. The root timelines use <code>autoRemoveChildren:true</code>.</li>
|
|
|
|
<li>
|
|
<b> smoothChildTiming </b>:<i> Boolean</i> -
|
|
Controls whether or not child tweens/timelines are repositioned automatically
|
|
(changing their <code>startTime</code>) in order to maintain smooth playback when
|
|
properties are changed on-the-fly. For example, imagine that the timeline's playhead is
|
|
on a child tween that is 75% complete, moving mc.x from 0 to 100 and then that tween's
|
|
<code>reverse()</code> method is called. If <code>smoothChildTiming</code> is <code>false</code>
|
|
(the default except for the root timelines), the tween would flip in place, keeping its
|
|
<code>startTime</code> consistent. Therefore the playhead of the timeline would now be
|
|
at the tween's 25% completion point instead of 75%. Remember, the timeline's playhead
|
|
position and direction are unaffected by child tween/timeline changes. mc.x would jump
|
|
from 75 to 25, but the tween's position in the timeline would remain consistent. However,
|
|
if <code>smoothChildTiming</code> is <code>true</code>, that child tween's
|
|
<code>startTime</code> would be adjusted so that the timeline's playhead intersects
|
|
with the same spot on the tween (75% complete) as it had immediately before
|
|
<code>reverse()</code> was called, thus playback appears perfectly smooth. mc.x
|
|
would still be 75 and it would continue from there as the playhead moves on, but
|
|
since the tween is reversed now mc.x will travel back towards 0 instead of 100.
|
|
Ultimately it's a decision between prioritizing smooth on-the-fly playback
|
|
(<code>true</code>) or consistent position(s) of child tweens/timelines
|
|
(<code>false</code>).
|
|
|
|
Some examples of on-the-fly changes to child tweens/timelines that could cause their
|
|
<code>startTime</code> to change when <code>smoothChildTiming</code> is <code>true</code>
|
|
are: <code>reversed, timeScale, progress, totalProgress, time, totalTime, delay, pause,
|
|
resume, duration,</code> and <code>totalDuration</code>.</li>
|
|
|
|
<li>
|
|
<b> repeat </b>:<i> Number</i> -
|
|
Number of times that the timeline should repeat after its first iteration. For example,
|
|
if <code>repeat</code> is 1, the timeline will play a total of twice (the initial play
|
|
plus 1 repeat). To repeat indefinitely, use -1. <code>repeat</code> should always be an integer.</li>
|
|
|
|
<li>
|
|
<b> repeatDelay </b>:<i> Number</i> -
|
|
Amount of time in seconds (or frames for frames-based timelines) between repeats. For example,
|
|
if <code>repeat</code> is 2 and <code>repeatDelay</code> is 1, the timeline will play initially,
|
|
then wait for 1 second before it repeats, then play again, then wait 1 second again before
|
|
doing its final repeat.</li>
|
|
|
|
<li>
|
|
<b> yoyo </b>:<i> Boolean</i> -
|
|
If <code>true</code>, every other <code>repeat</code> cycle will run in the opposite
|
|
direction so that the timeline appears to go back and forth (forward then backward).
|
|
This has no affect on the "<code>reversed</code>" property though. So if <code>repeat</code>
|
|
is 2 and <code>yoyo</code> is <code>false</code>, it will look like:
|
|
start - 1 - 2 - 3 - 1 - 2 - 3 - 1 - 2 - 3 - end. But if <code>yoyo</code> is <code>true</code>,
|
|
it will look like: start - 1 - 2 - 3 - 3 - 2 - 1 - 1 - 2 - 3 - end.</li>
|
|
|
|
<li>
|
|
<b> onRepeat </b>:<i> Function</i> -
|
|
A function that should be called each time the timeline repeats</li>
|
|
|
|
<li>
|
|
<b> onRepeatParams </b>:<i> Array</i> -
|
|
An Array of parameters to pass the onRepeat function. For example,
|
|
<code>new TimelineMax({repeat:3, onRepeat:myFunction, onRepeatParams:[mc, "param2"]});</code>
|
|
To self-reference the timeline instance itself in one of the parameters, use <code>"{self}"</code>,
|
|
like: <code>onRepeatParams:["{self}", "param2"]</code>
|
|
</li>
|
|
|
|
<li>
|
|
<b> onRepeatScope </b>:<i> Object</i> -
|
|
Defines the scope of the onRepeat function (what <code>"this"</code> refers to inside that function).</li>
|
|
|
|
</ul>
|
|
|
|
<p></p><p><a href="#includeExamplesSummary">View the examples</a></p><br/><hr></div><a name="propertySummary"></a><div class="summarySection"><div class="summaryTableTitle">Public Properties</div><div class="showHideLinks"><div id="hideInheritedProperty" class="hideInheritedProperty"><a class="showHideLink" href="#propertySummary" onclick="javascript:setInheritedVisible(false,'Property');"><img class="showHideLinkImage" src="../../images/expanded.gif"> Hide Inherited Public Properties</a></div><div id="showInheritedProperty" class="showInheritedProperty"><a class="showHideLink" href="#propertySummary" onclick="javascript:setInheritedVisible(true,'Property');"><img class="showHideLinkImage" src="../../images/collapsed.gif"> Show Inherited Public Properties</a></div></div><table cellspacing="0" cellpadding="3" class="summaryTable hideInheritedProperty" id="summaryTableProperty"><tr><th> </th><th colspan="2">Property</th><th class="summaryTableOwnerCol">Defined By</th></tr><tr class="hideInheritedProperty"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><a href="../../com/greensock/core/SimpleTimeline.html#autoRemoveChildren" class="signatureLink">autoRemoveChildren</a> : Boolean<div class="summaryTableDescription"> If true, child tweens/timelines will be removed as soon as they complete.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/core/SimpleTimeline.html">SimpleTimeline</a></td></tr><tr class="hideInheritedProperty"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><a href="../../com/greensock/core/Animation.html#data" class="signatureLink">data</a> : *<div class="summaryTableDescription"> A place to store any data you want (initially populated with vars.data if it exists).</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/core/Animation.html">Animation</a></td></tr><tr class="hideInheritedProperty"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><a href="../../com/greensock/core/SimpleTimeline.html#smoothChildTiming" class="signatureLink">smoothChildTiming</a> : Boolean<div class="summaryTableDescription">
|
|
Controls whether or not child tweens/timelines are repositioned automatically (changing their startTime)
|
|
in order to maintain smooth playback when properties are changed on-the-fly.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/core/SimpleTimeline.html">SimpleTimeline</a></td></tr><tr class="hideInheritedProperty"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><a href="../../com/greensock/core/Animation.html#ticker" class="signatureLink">ticker</a> : Shape<div class="summaryTableDescription">[static]
|
|
The object that dispatches a "tick" event each time the engine updates, making it easy for
|
|
you to add your own listener(s) to run custom logic after each update (great for game developers).</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/core/Animation.html">Animation</a></td></tr><tr class="hideInheritedProperty"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><a href="../../com/greensock/core/Animation.html#timeline" class="signatureLink">timeline</a> : <a href="../../com/greensock/core/SimpleTimeline.html">SimpleTimeline</a><div class="summaryTableDescription"> [Read-only] Parent timeline.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/core/Animation.html">Animation</a></td></tr><tr class="hideInheritedProperty"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><a href="../../com/greensock/core/Animation.html#vars" class="signatureLink">vars</a> : Object<div class="summaryTableDescription"> The vars object passed into the constructor which stores configuration variables like onComplete, onUpdate, etc.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/core/Animation.html">Animation</a></td></tr></table></div><a name="methodSummary"></a><div class="summarySection"><div class="summaryTableTitle">Public Methods </div><div class="showHideLinks"><div id="hideInheritedMethod" class="hideInheritedMethod"><a class="showHideLink" href="#methodSummary" onclick="javascript:setInheritedVisible(false,'Method');"><img class="showHideLinkImage" src="../../images/expanded.gif"> Hide Inherited Public Methods</a></div><div id="showInheritedMethod" class="showInheritedMethod"><a class="showHideLink" href="#methodSummary" onclick="javascript:setInheritedVisible(true,'Method');"><img class="showHideLinkImage" src="../../images/collapsed.gif"> Show Inherited Public Methods</a></div></div><table cellspacing="0" cellpadding="3" class="summaryTable " id="summaryTableMethod"><tr><th> </th><th colspan="2">Method</th><th class="summaryTableOwnerCol">Defined By</th></tr><tr class=""><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="#TimelineMax()" class="signatureLink">TimelineMax</a>(vars:Object = null)</div><div class="summaryTableDescription">
|
|
Constructor.</div></td><td class="summaryTableOwnerCol">TimelineMax</td></tr><tr class=""><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="#addCallback()" class="signatureLink">addCallback</a>(callback:Function, timeOrLabel:*, params:Array = null, scope:* = null):<a href="../../com/greensock/TimelineMax.html">TimelineMax</a></div><div class="summaryTableDescription">
|
|
Inserts a callback at a particular time or label.</div></td><td class="summaryTableOwnerCol">TimelineMax</td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/TimelineLite.html#addLabel()" class="signatureLink">addLabel</a>(label:String, time:Number):*</div><div class="summaryTableDescription">
|
|
Adds a label to the timeline, making it easy to mark important positions/times.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/TimelineLite.html">TimelineLite</a></td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/TimelineLite.html#append()" class="signatureLink">append</a>(value:*, offsetOrLabel:* = 0):*</div><div class="summaryTableDescription">
|
|
Appends a tween, timeline, callback, or label to the end of the timeline,
|
|
optionally offsetting its insertion point by a certain amount (to make it overlap with the end of
|
|
the timeline or leave a gap before its insertion point).</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/TimelineLite.html">TimelineLite</a></td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/TimelineLite.html#appendMultiple()" class="signatureLink">appendMultiple</a>(tweens:Array, offsetOrLabel:* = 0, align:String = normal, stagger:Number = 0):*</div><div class="summaryTableDescription">
|
|
Appends multiple tweens/timelines/callbacks/labels to the end of the timeline at once, optionally
|
|
offsetting the insertion point by a certain amount, aligning them (as a sequence for example), and/or
|
|
staggering their relative timing.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/TimelineLite.html">TimelineLite</a></td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/TimelineLite.html#call()" class="signatureLink">call</a>(callback:Function, params:Array = null, scope:* = null, offsetOrLabel:* = 0, baseTimeOrLabel:* = null):*</div><div class="summaryTableDescription">
|
|
Appends a callback to the end of the timeline - this is
|
|
a convenience method that accomplishes exactly the same thing as
|
|
append( TweenLite.delayedCall(...) ) but with less code.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/TimelineLite.html">TimelineLite</a></td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/TimelineLite.html#clear()" class="signatureLink">clear</a>(labels:Boolean = true):*</div><div class="summaryTableDescription">
|
|
Empties the timeline of all tweens, timelines, and callbacks (and optionally labels too).</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/TimelineLite.html">TimelineLite</a></td></tr><tr class=""><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="#currentLabel()" class="signatureLink">currentLabel</a>(value:String = null):*</div><div class="summaryTableDescription">
|
|
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).</div></td><td class="summaryTableOwnerCol">TimelineMax</td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/core/Animation.html#delay()" class="signatureLink">delay</a>(value:Number):*</div><div class="summaryTableDescription">
|
|
Gets or sets the animation's initial delay which is the length of time in seconds
|
|
(or frames for frames-based tweens) before the animation should begin.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/core/Animation.html">Animation</a></td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/TimelineLite.html#duration()" class="signatureLink">duration</a>(value:Number):*</div><div class="summaryTableDescription">[override]
|
|
Gets the timeline's duration or, if used as a setter, adjusts the timeline's
|
|
timeScale to fit it within the specified duration.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/TimelineLite.html">TimelineLite</a></td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/core/Animation.html#eventCallback()" class="signatureLink">eventCallback</a>(type:String, callback:Function = null, params:Array = null, scope:* = null):*</div><div class="summaryTableDescription">
|
|
Gets or sets an event callback like "onComplete", "onUpdate", "onStart", "onReverseComplete"
|
|
or "onRepeat" (onRepeat only applies to TweenMax or TimelineMax instances)
|
|
along with any parameters that should be passed to that callback.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/core/Animation.html">Animation</a></td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/TimelineLite.html#exportRoot()" class="signatureLink">exportRoot</a>(vars:Object = null, omitDelayedCalls:Boolean = true):<a href="../../com/greensock/TimelineLite.html">TimelineLite</a></div><div class="summaryTableDescription">[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.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/TimelineLite.html">TimelineLite</a></td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/TimelineLite.html#from()" class="signatureLink">from</a>(target:Object, duration:Number, vars:Object, offsetOrLabel:* = 0, baseTimeOrLabel:* = null):*</div><div class="summaryTableDescription">
|
|
Appends a TweenLite.from() tween to the end of the timeline (or elsewhere)
|
|
- this is a convenience method that accomplishes exactly the same thing as
|
|
append( TweenLite.from(...) ) but with less code.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/TimelineLite.html">TimelineLite</a></td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/TimelineLite.html#fromTo()" class="signatureLink">fromTo</a>(target:Object, duration:Number, fromVars:Object, toVars:Object, offsetOrLabel:* = 0, baseTimeOrLabel:* = null):*</div><div class="summaryTableDescription">
|
|
Appends a TweenLite.fromTo() tween to the end of the timeline - this is
|
|
a convenience method that accomplishes exactly the same thing as
|
|
append( TweenLite.fromTo(...) ) but with less code.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/TimelineLite.html">TimelineLite</a></td></tr><tr class=""><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="#getActive()" class="signatureLink">getActive</a>(nested:Boolean = true, tweens:Boolean = true, timelines:Boolean = false):Array</div><div class="summaryTableDescription">
|
|
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.</div></td><td class="summaryTableOwnerCol">TimelineMax</td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/TimelineLite.html#getChildren()" class="signatureLink">getChildren</a>(nested:Boolean = true, tweens:Boolean = true, timelines:Boolean = true, ignoreBeforeTime:Number = -9999999999):Array</div><div class="summaryTableDescription">
|
|
Returns an array containing all the tweens and/or timelines nested in this timeline.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/TimelineLite.html">TimelineLite</a></td></tr><tr class=""><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="#getLabelAfter()" class="signatureLink">getLabelAfter</a>(time:Number):String</div><div class="summaryTableDescription">
|
|
Returns the next label (if any) that occurs after the time parameter.</div></td><td class="summaryTableOwnerCol">TimelineMax</td></tr><tr class=""><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="#getLabelBefore()" class="signatureLink">getLabelBefore</a>(time:Number):String</div><div class="summaryTableDescription">
|
|
Returns the previous label (if any) that occurs before the time parameter.</div></td><td class="summaryTableOwnerCol">TimelineMax</td></tr><tr class=""><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="#getLabelsArray()" class="signatureLink">getLabelsArray</a>():Array</div><div class="summaryTableDescription">
|
|
Returns an Array of label objects, each with a "time" and "name" property, in the order that they occur in the timeline.</div></td><td class="summaryTableOwnerCol">TimelineMax</td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/TimelineLite.html#getLabelTime()" class="signatureLink">getLabelTime</a>(label:String):Number</div><div class="summaryTableDescription">
|
|
Returns the time associated with a particular label.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/TimelineLite.html">TimelineLite</a></td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/TimelineLite.html#getTweensOf()" class="signatureLink">getTweensOf</a>(target:Object, nested:Boolean = true):Array</div><div class="summaryTableDescription">
|
|
Returns the tweens of a particular object that are inside this timeline.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/TimelineLite.html">TimelineLite</a></td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/TimelineLite.html#insert()" class="signatureLink">insert</a>(value:*, timeOrLabel:* = 0):*</div><div class="summaryTableDescription">[override]
|
|
Inserts a tween, timeline, callback, or label into the timeline at a specific time, frame,
|
|
or label.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/TimelineLite.html">TimelineLite</a></td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/TimelineLite.html#insertMultiple()" class="signatureLink">insertMultiple</a>(tweens:Array, timeOrLabel:* = 0, align:String = normal, stagger:Number = 0):*</div><div class="summaryTableDescription">
|
|
Inserts multiple tweens/timelines/callbacks/labels into the timeline at once, optionally aligning them
|
|
(as a sequence for example) and/or staggering the timing.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/TimelineLite.html">TimelineLite</a></td></tr><tr class=""><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="#invalidate()" class="signatureLink">invalidate</a>():*</div><div class="summaryTableDescription">[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.</div></td><td class="summaryTableOwnerCol">TimelineMax</td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/core/Animation.html#kill()" class="signatureLink">kill</a>(vars:Object = null, target:Object = null):*</div><div class="summaryTableDescription">
|
|
Kills the animation entirely or in part depending on the parameters.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/core/Animation.html">Animation</a></td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/core/Animation.html#pause()" class="signatureLink">pause</a>(atTime:* = null, suppressEvents:Boolean = true):*</div><div class="summaryTableDescription">
|
|
Pauses the instance, optionally jumping to a specific time.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/core/Animation.html">Animation</a></td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/core/Animation.html#paused()" class="signatureLink">paused</a>(value:Boolean = false):*</div><div class="summaryTableDescription">
|
|
Gets or sets the animation's paused state which indicates whether or not the animation
|
|
is currently paused.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/core/Animation.html">Animation</a></td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/core/Animation.html#play()" class="signatureLink">play</a>(from:* = null, suppressEvents:Boolean = true):*</div><div class="summaryTableDescription">
|
|
Begins playing forward, optionally from a specific time (by default playback begins from
|
|
wherever the playhead currently is).</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/core/Animation.html">Animation</a></td></tr><tr class=""><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="#progress()" class="signatureLink">progress</a>(value:Number):*</div><div class="summaryTableDescription">[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.</div></td><td class="summaryTableOwnerCol">TimelineMax</td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/TimelineLite.html#remove()" class="signatureLink">remove</a>(value:*):*</div><div class="summaryTableDescription">
|
|
Removes a tween, timeline, callback, or label from the timeline.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/TimelineLite.html">TimelineLite</a></td></tr><tr class=""><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="#removeCallback()" class="signatureLink">removeCallback</a>(callback:Function, timeOrLabel:* = null):<a href="../../com/greensock/TimelineMax.html">TimelineMax</a></div><div class="summaryTableDescription">
|
|
Removes a callback from a particular time or label.</div></td><td class="summaryTableOwnerCol">TimelineMax</td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/TimelineLite.html#removeLabel()" class="signatureLink">removeLabel</a>(label:String):*</div><div class="summaryTableDescription">
|
|
|
|
Removes a label from the timeline and returns the time of that label.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/TimelineLite.html">TimelineLite</a></td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/core/SimpleTimeline.html#render()" class="signatureLink">render</a>(time:Number, suppressEvents:Boolean = false, force:Boolean = false):void</div><div class="summaryTableDescription">[override] </div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/core/SimpleTimeline.html">SimpleTimeline</a></td></tr><tr class=""><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="#repeat()" class="signatureLink">repeat</a>(value:Number = 0):*</div><div class="summaryTableDescription">
|
|
Gets or sets the number of times that the timeline should repeat after its first iteration.</div></td><td class="summaryTableOwnerCol">TimelineMax</td></tr><tr class=""><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="#repeatDelay()" class="signatureLink">repeatDelay</a>(value:Number = 0):*</div><div class="summaryTableDescription">
|
|
Gets or sets the amount of time in seconds (or frames for frames-based timelines) between repeats.</div></td><td class="summaryTableOwnerCol">TimelineMax</td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/core/Animation.html#restart()" class="signatureLink">restart</a>(includeDelay:Boolean = false, suppressEvents:Boolean = true):*</div><div class="summaryTableDescription">
|
|
Restarts and begins playing forward from the beginning.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/core/Animation.html">Animation</a></td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/core/Animation.html#resume()" class="signatureLink">resume</a>(from:* = null, suppressEvents:Boolean = true):*</div><div class="summaryTableDescription">
|
|
Resumes playing without altering direction (forward or reversed), optionally jumping to a specific time first.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/core/Animation.html">Animation</a></td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/core/Animation.html#reverse()" class="signatureLink">reverse</a>(from:* = null, suppressEvents:Boolean = true):*</div><div class="summaryTableDescription">
|
|
Reverses playback so that all aspects of the animation are oriented backwards including, for example,
|
|
a tween's ease.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/core/Animation.html">Animation</a></td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/core/Animation.html#reversed()" class="signatureLink">reversed</a>(value:Boolean = false):*</div><div class="summaryTableDescription">
|
|
Gets or sets the animation's reversed state which indicates whether or not the animation
|
|
should be played backwards.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/core/Animation.html">Animation</a></td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/TimelineLite.html#seek()" class="signatureLink">seek</a>(timeOrLabel:*, suppressEvents:Boolean = true):*</div><div class="summaryTableDescription">[override]
|
|
Jumps to a specific time (or label) without affecting whether or not the instance
|
|
is paused or reversed.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/TimelineLite.html">TimelineLite</a></td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/TimelineLite.html#set()" class="signatureLink">set</a>(target:Object, vars:Object, offsetOrLabel:* = 0, baseTimeOrLabel:* = null):*</div><div class="summaryTableDescription">
|
|
Appends a zero-duration tween to the end of the timeline 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 append( TweenLite.to(target, 0, {...}) ) but
|
|
with less code.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/TimelineLite.html">TimelineLite</a></td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/TimelineLite.html#shiftChildren()" class="signatureLink">shiftChildren</a>(amount:Number, adjustLabels:Boolean = false, ignoreBeforeTime:Number = 0):*</div><div class="summaryTableDescription">
|
|
Shifts the startTime of the timeline's children by a certain amount and optionally adjusts labels too.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/TimelineLite.html">TimelineLite</a></td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/TimelineLite.html#staggerFrom()" class="signatureLink">staggerFrom</a>(targets:Array, duration:Number, vars:Object, stagger:Number = 0, offsetOrLabel:* = 0, baseTimeOrLabel:* = null, onCompleteAll:Function = null, onCompleteAllParams:Array = null, onCompleteAllScope:Object = null):*</div><div class="summaryTableDescription">
|
|
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.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/TimelineLite.html">TimelineLite</a></td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/TimelineLite.html#staggerFromTo()" class="signatureLink">staggerFromTo</a>(targets:Array, duration:Number, fromVars:Object, toVars:Object, stagger:Number = 0, offsetOrLabel:* = 0, baseTimeOrLabel:* = null, onCompleteAll:Function = null, onCompleteAllParams:Array = null, onCompleteAllScope:Object = null):*</div><div class="summaryTableDescription">
|
|
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.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/TimelineLite.html">TimelineLite</a></td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/TimelineLite.html#staggerTo()" class="signatureLink">staggerTo</a>(targets:Array, duration:Number, vars:Object, stagger:Number, offsetOrLabel:* = 0, baseTimeOrLabel:* = null, onCompleteAll:Function = null, onCompleteAllParams:Array = null, onCompleteAllScope:Object = null):*</div><div class="summaryTableDescription">
|
|
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.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/TimelineLite.html">TimelineLite</a></td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/core/Animation.html#startTime()" class="signatureLink">startTime</a>(value:Number):*</div><div class="summaryTableDescription">
|
|
Gets or sets the time at which the animation begins on its parent timeline (after any delay
|
|
that was defined).</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/core/Animation.html">Animation</a></td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/TimelineLite.html#stop()" class="signatureLink">stop</a>():*</div><div class="summaryTableDescription"> [deprecated] Pauses the timeline (used for consistency with Flash's MovieClip.stop() functionality, but essentially accomplishes the same thing as pause() without the parameter) </div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/TimelineLite.html">TimelineLite</a></td></tr><tr class=""><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="#time()" class="signatureLink">time</a>(value:Number, suppressEvents:Boolean = false):*</div><div class="summaryTableDescription">[override]
|
|
Gets or sets the local position of the playhead (essentially the current time), not
|
|
including any repeats or repeatDelays.</div></td><td class="summaryTableOwnerCol">TimelineMax</td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/core/Animation.html#timeScale()" class="signatureLink">timeScale</a>(value:Number):*</div><div class="summaryTableDescription">
|
|
Factor that's used to scale time in the animation where 1 = normal speed (the default),
|
|
0.5 = half speed, 2 = double speed, etc.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/core/Animation.html">Animation</a></td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/TimelineLite.html#to()" class="signatureLink">to</a>(target:Object, duration:Number, vars:Object, offsetOrLabel:* = 0, baseTimeOrLabel:* = null):*</div><div class="summaryTableDescription">
|
|
Appends a TweenLite.to() tween to the end of the timeline (or elsewhere)
|
|
- this is a convenience method that accomplishes exactly the same thing as
|
|
append( TweenLite.to(...) ) but with less code.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/TimelineLite.html">TimelineLite</a></td></tr><tr class=""><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="#totalDuration()" class="signatureLink">totalDuration</a>(value:Number):*</div><div class="summaryTableDescription">[override]
|
|
Gets or sets the total duration of the timeline in seconds (or frames for frames-based timelines)
|
|
including any repeats or repeatDelays.</div></td><td class="summaryTableOwnerCol">TimelineMax</td></tr><tr class=""><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="#totalProgress()" class="signatureLink">totalProgress</a>(value:Number):*</div><div class="summaryTableDescription">
|
|
Gets or sets the timeline's totalProgress 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
|
|
halfway complete, and 1 is complete.</div></td><td class="summaryTableOwnerCol">TimelineMax</td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/core/Animation.html#totalTime()" class="signatureLink">totalTime</a>(time:Number, suppressEvents:Boolean = false):*</div><div class="summaryTableDescription">
|
|
Gets or sets the position of the playhead according to the totalDuration
|
|
which includes any repeats and repeatDelays (only available
|
|
in TweenMax and TimelineMax).</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/core/Animation.html">Animation</a></td></tr><tr class=""><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="#tweenFromTo()" class="signatureLink">tweenFromTo</a>(fromTimeOrLabel:*, toTimeOrLabel:*, vars:Object = null):<a href="../../com/greensock/TweenLite.html">TweenLite</a></div><div class="summaryTableDescription">
|
|
Creates a linear tween that essentially scrubs the playhead from a particular time or label
|
|
to another time or label and then stops.</div></td><td class="summaryTableOwnerCol">TimelineMax</td></tr><tr class=""><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="#tweenTo()" class="signatureLink">tweenTo</a>(timeOrLabel:*, vars:Object = null):<a href="../../com/greensock/TweenLite.html">TweenLite</a></div><div class="summaryTableDescription">
|
|
Creates a linear tween that essentially scrubs the playhead to a particular time or label and
|
|
then stops.</div></td><td class="summaryTableOwnerCol">TimelineMax</td></tr><tr class="hideInheritedMethod"><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img src="../../images/inheritedSummary.gif" alt="Inherited" title="Inherited" class="inheritedSummaryImage"></td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="../../com/greensock/TimelineLite.html#usesFrames()" class="signatureLink">usesFrames</a>():Boolean</div><div class="summaryTableDescription">
|
|
[READ-ONLY] If true, the timeline's timing mode is frames-based instead of
|
|
seconds.</div></td><td class="summaryTableOwnerCol"><a href="../../com/greensock/TimelineLite.html">TimelineLite</a></td></tr><tr class=""><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="#yoyo()" class="signatureLink">yoyo</a>(value:Boolean = false):*</div><div class="summaryTableDescription">
|
|
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.</div></td><td class="summaryTableOwnerCol">TimelineMax</td></tr></table></div><script language="javascript" type="text/javascript"><!--
|
|
showHideInherited();
|
|
--></script><div class="MainContent"><a name="constructorDetail"></a><div class="detailSectionHeader">Constructor Detail</div><a name="TimelineMax()"></a><a name="TimelineMax(Object)"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">TimelineMax</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">Constructor</td></tr></table><div class="detailBody"><code>public function TimelineMax(vars:Object = null)</code><p></p><p>
|
|
Constructor.
|
|
|
|
<p><b>SPECIAL PROPERTIES</b></p>
|
|
<p>The following special properties may be passed in via the constructor's vars parameter, like
|
|
<code>new TimelineMax({paused:true, onComplete:myFunction, repeat:2, yoyo:true})</code> </p>
|
|
|
|
<ul>
|
|
<li><b> delay </b>:<i> Number</i> -
|
|
Amount of delay in seconds (or frames for frames-based tweens) before the timeline should begin.</li>
|
|
|
|
<li><b> paused </b>:<i> Boolean</i> -
|
|
If <code>true</code>, the timeline will pause itself immediately upon creation (by default,
|
|
timelines automatically begin playing immediately). If you plan to create a TimelineMax and
|
|
then populate it later (after one or more frames elapse), it is typically best to set
|
|
<code>paused:true</code> and then <code>play()</code> after you populate it.</li>
|
|
|
|
<li><b> onComplete </b>:<i> Function</i> -
|
|
A function that should be called when the timeline has completed</li>
|
|
|
|
<li><b> onCompleteParams </b>:<i> Array</i> -
|
|
An Array of parameters to pass the <code>onComplete</code> function. For example,
|
|
<code>new TimelineMax({onComplete:myFunction, onCompleteParams:["param1", "param2"]});</code>
|
|
To self-reference the timeline instance itself in one of the parameters, use <code>"{self}"</code>,
|
|
like: <code>onCompleteParams:["{self}", "param2"]</code></li>
|
|
|
|
<li><b> onCompleteScope </b>:<i> Object</i> -
|
|
Defines the scope of the onComplete function (what <code>"this"</code> refers to inside that function).</li>
|
|
|
|
<li><b> useFrames </b>:<i> Boolean</i> -
|
|
If <code>useFrames</code> is <code>true</code>, the timelines's timing will be
|
|
based on frames instead of seconds because it is intially added to the root
|
|
frames-based timeline. This causes both its <code>duration</code>
|
|
and <code>delay</code> to be based on frames. An animations's timing mode is
|
|
always determined by its parent <code>timeline</code>.</li>
|
|
|
|
<li><b> tweens </b>:<i> Array</i> -
|
|
To immediately insert several tweens into the timeline, use the <code>tweens</code>
|
|
special property to pass in an Array of TweenLite/TweenMax/TimelineLite/TimelineMax
|
|
instances. You can use this in conjunction with the <code>align</code> and
|
|
<code>stagger</code> special properties to set up complex sequences with minimal code.
|
|
These values simply get passed to the <code>insertMultiple()</code> method.</li>
|
|
|
|
<li><b> align </b>:<i> String</i> -
|
|
Only used in conjunction with the <code>tweens</code> special property when multiple
|
|
tweens are to be inserted immediately. The value simply gets passed to the
|
|
<code>insertMultiple()</code> method. The default is <code>"normal"</code>.
|
|
Options are:
|
|
<ul>
|
|
<li><b><code>"sequence"</code></b>: aligns the tweens one-after-the-other in a sequence</li>
|
|
<li><b><code>"start"</code></b>: aligns the start times of all of the tweens (ignores delays)</li>
|
|
<li><b><code>"normal"</code></b>: aligns the start times of all the tweens (honors delays)</li>
|
|
</ul>
|
|
The <code>align</code> special property does <b>not</b> force all child
|
|
tweens/timelines to maintain relative positioning, so for example, if you use
|
|
<code>"sequence"</code> and then later change the duration of one of the nested tweens,
|
|
it does <b>not</b> force all subsequent timelines to change their position.
|
|
The <code>align</code> special property only affects the alignment of the tweens that are
|
|
initially placed into the timeline through the <code>tweens</code> special property of
|
|
the <code>vars</code> object.</li>
|
|
|
|
<li><b> stagger </b>:<i> Number</i> -
|
|
Only used in conjunction with the <code>tweens</code> special property when multiple
|
|
tweens are to be inserted immediately. It staggers the tweens by a set amount of time
|
|
in seconds (or in frames if <code>useFrames</code> is true). For example, if the
|
|
stagger value is 0.5 and the "align" property is set to <code>"start"</code>, 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 <code>"sequence"</code>,
|
|
there would be 0.5 seconds added between each tween. This value simply gets
|
|
passed to the <code>insertMultiple()</code> method. Default is 0.</li>
|
|
|
|
<li><b> onStart </b>:<i> Function</i> -
|
|
A function that should be called when the timeline begins (when its <code>time</code>
|
|
changes from 0 to some other value which can happen more than once if the
|
|
timeline is restarted multiple times).</li>
|
|
|
|
<li><b> onStartParams </b>:<i> Array</i> -
|
|
An Array of parameters to pass the <code>onStart</code> function. For example,
|
|
<code>new TimelineMax({onStart:myFunction, onStartParams:["param1", "param2"]});</code>
|
|
To self-reference the timeline instance itself in one of the parameters, use <code>"{self}"</code>,
|
|
like: <code>onStartParams:["{self}", "param2"]</code></li>
|
|
|
|
<li><b> onStartScope </b>:<i> Object</i> -
|
|
Defines the scope of the onStart function (what <code>"this"</code> refers to inside that function).</li>
|
|
|
|
<li><b> onUpdate </b>:<i> Function</i> -
|
|
A function that should be called every time the timeline updates
|
|
(on every frame while the timeline is active)</li>
|
|
|
|
<li><b> onUpdateParams </b>:<i> Array</i> -
|
|
An Array of parameters to pass the <code>onUpdate</code> function. For example,
|
|
<code>new TimelineMax({onUpdate:myFunction, onUpdateParams:["param1", "param2"]});</code>
|
|
To self-reference the timeline instance itself in one of the parameters, use <code>"{self}"</code>,
|
|
like: <code>onUpdateParams:["{self}", "param2"]</code></li>
|
|
|
|
<li><b> onUpdateScope </b>:<i> Object</i> -
|
|
Defines the scope of the onUpdate function (what <code>"this"</code> refers to inside that function).</li>
|
|
|
|
<li><b> onReverseComplete </b>:<i> Function</i> -
|
|
A function that should be called when the timeline has reached its beginning again from the
|
|
reverse direction. For example, if <code>reverse()</code> is called, the timeline will move
|
|
back towards its beginning and when its <code>time</code> reaches 0, <code>onReverseComplete</code>
|
|
will be called. This can also happen if the timeline is placed in a TimelineLite or TimelineMax
|
|
instance that gets reversed and plays the timeline backwards to (or past) the beginning.</li>
|
|
|
|
<li><b> onReverseCompleteParams </b>:<i> Array</i> -
|
|
An Array of parameters to pass the <code>onReverseComplete</code> function. For example,
|
|
<code>new TimelineMax({onReverseComplete:myFunction, onReverseCompleteParams:["param1", "param2"]});</code>
|
|
To self-reference the timeline instance itself in one of the parameters, use <code>"{self}"</code>,
|
|
like: <code>onReverseCompleteParams:["{self}", "param2"]</code></li>
|
|
|
|
<li><b> onReverseCompleteScope </b>:<i> Object</i> -
|
|
Defines the scope of the onReverseComplete function (what <code>"this"</code> refers to inside that function).</li>
|
|
|
|
<li><b> autoRemoveChildren </b>:<i> Boolean</i> -
|
|
If <code>autoRemoveChildren</code> is set to <code>true</code>, as soon as child
|
|
tweens/timelines complete, they will automatically get killed/removed. This is normally
|
|
undesireable because it prevents going backwards in time (like if you want to
|
|
<code>reverse()</code> or set the <code>progress</code> lower, etc.). It can, however,
|
|
improve speed and memory management. The root timelines use <code>autoRemoveChildren:true</code>.</li>
|
|
|
|
<li><b> smoothChildTiming </b>:<i> Boolean</i> -
|
|
Controls whether or not child tweens/timelines are repositioned automatically
|
|
(changing their <code>startTime</code>) in order to maintain smooth playback when
|
|
properties are changed on-the-fly. For example, imagine that the timeline's playhead is
|
|
on a child tween that is 75% complete, moving mc.x from 0 to 100 and then that tween's
|
|
<code>reverse()</code> method is called. If <code>smoothChildTiming</code> is <code>false</code>
|
|
(the default except for the root timelines), the tween would flip in place, keeping its
|
|
<code>startTime</code> consistent. Therefore the playhead of the timeline would now be
|
|
at the tween's 25% completion point instead of 75%. Remember, the timeline's playhead
|
|
position and direction are unaffected by child tween/timeline changes. mc.x would jump
|
|
from 75 to 25, but the tween's position in the timeline would remain consistent. However,
|
|
if <code>smoothChildTiming</code> is <code>true</code>, that child tween's
|
|
<code>startTime</code> would be adjusted so that the timeline's playhead intersects
|
|
with the same spot on the tween (75% complete) as it had immediately before
|
|
<code>reverse()</code> was called, thus playback appears perfectly smooth. mc.x
|
|
would still be 75 and it would continue from there as the playhead moves on, but
|
|
since the tween is reversed now mc.x will travel back towards 0 instead of 100.
|
|
Ultimately it's a decision between prioritizing smooth on-the-fly playback
|
|
(<code>true</code>) or consistent position(s) of child tweens/timelines
|
|
(<code>false</code>).
|
|
|
|
Some examples of on-the-fly changes to child tweens/timelines that could cause their
|
|
<code>startTime</code> to change when <code>smoothChildTiming</code> is <code>true</code>
|
|
are: <code>reversed, timeScale, progress, totalProgress, time, totalTime, delay, pause,
|
|
resume, duration,</code> and <code>totalDuration</code>.</li>
|
|
|
|
<li><b> repeat </b>:<i> Number</i> -
|
|
Number of times that the timeline should repeat after its first iteration. For example,
|
|
if <code>repeat</code> is 1, the timeline will play a total of twice (the initial play
|
|
plus 1 repeat). To repeat indefinitely, use -1. <code>repeat</code> should always be an integer.</li>
|
|
|
|
<li><b> repeatDelay </b>:<i> Number</i> -
|
|
Amount of time in seconds (or frames for frames-based timelines) between repeats. For example,
|
|
if <code>repeat</code> is 2 and <code>repeatDelay</code> is 1, the timeline will play initially,
|
|
then wait for 1 second before it repeats, then play again, then wait 1 second again before
|
|
doing its final repeat.</li>
|
|
|
|
<li><b> yoyo </b>:<i> Boolean</i> -
|
|
If <code>true</code>, every other <code>repeat</code> cycle will run in the opposite
|
|
direction so that the timeline appears to go back and forth (forward then backward).
|
|
This has no affect on the "<code>reversed</code>" property though. So if <code>repeat</code>
|
|
is 2 and <code>yoyo</code> is <code>false</code>, it will look like:
|
|
start - 1 - 2 - 3 - 1 - 2 - 3 - 1 - 2 - 3 - end. But if <code>yoyo</code> is <code>true</code>,
|
|
it will look like: start - 1 - 2 - 3 - 3 - 2 - 1 - 1 - 2 - 3 - end.</li>
|
|
|
|
<li><b> onRepeat </b>:<i> Function</i> -
|
|
A function that should be called each time the timeline repeats</li>
|
|
|
|
<li><b> onRepeatParams </b>:<i> Array</i> -
|
|
An Array of parameters to pass the onRepeat function. For example,
|
|
<code>new TimelineMax({repeat:3, onRepeat:myFunction, onRepeatParams:[mc, "param2"]});</code>
|
|
To self-reference the timeline instance itself in one of the parameters, use <code>"{self}"</code>,
|
|
like: <code>onRepeatParams:["{self}", "param2"]</code></li>
|
|
|
|
<li><b> onRepeatScope </b>:<i> Object</i> -
|
|
Defines the scope of the onRepeat function (what <code>"this"</code> refers to inside that function).</li>
|
|
|
|
</ul>
|
|
|
|
</p><span class="label"> Parameters </span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20px"></td><td><code><span class="label">vars</span>:Object</code> (default = <code>null</code>)<code></code> — optionally pass in special properties like useFrames, onComplete, onCompleteParams, onUpdate, onUpdateParams, onStart, onStartParams, tweens, align, stagger, delay, autoRemoveChildren, onCompleteListener, onStartListener, onUpdateListener, repeat, repeatDelay, and/or yoyo.
|
|
</td></tr></table></div><a name="methodDetail"></a><div class="detailSectionHeader">Method Detail</div><a name="addCallback()"></a><a name="addCallback(Function,any,Array,any)"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">addCallback</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">method</td></tr></table><div class="detailBody"><code> public function addCallback(callback:Function, timeOrLabel:*, params:Array = null, scope:* = null):<a href="../../com/greensock/TimelineMax.html">TimelineMax</a></code><p></p><p></p><p>
|
|
Inserts a callback at a particular time or label. The callback is technically considered a
|
|
zero-duration tween, so if you getChildren() there will be a tween returned for each callback.
|
|
You can discern a callback from other tweens by the fact that its target is a function matching
|
|
its <code>vars.onComplete</code> and its <code>duration</code> is zero.
|
|
|
|
<p>If your goal is to append the callback to the end of the timeline, it would be easier
|
|
(more concise) to use the <code>call()</code> method. Technically the <code>insert()</code> and
|
|
<code>append()</code> methods can accommodate adding a callback (like <code>myTimeline.insert(myFunction, 2)</code>
|
|
or <code>myTimeline.append(myFunction)</code>) but they don't accommodate parameters.</p>
|
|
|
|
<p><b>JavaScript and AS2 note:</b> - Due to the way JavaScript and AS2 don't
|
|
maintain scope (what "<code>this</code>" refers to, or the context) in function calls,
|
|
it can be useful to define the scope specifically. Therefore, the JavaScript and AS2
|
|
versions accept a 4th parameter to [optionally] define the <code>scope</code>, but it
|
|
is omitted in AS3.</p>
|
|
|
|
</p><p><span class="label"> Parameters </span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20px"></td><td><code><span class="label">callback</span>:Function</code> — The function to be called
|
|
</td></tr><tr><td class="paramSpacer"> </td></tr><tr><td width="20px"></td><td><code><span class="label">timeOrLabel</span>:*</code> — The time in seconds (or frames for frames-based timelines) or label at which the callback should be inserted. For example, <code>myTimeline.addCallback(myFunction, 3)</code> would call myFunction() 3 seconds into the timeline, and <code>myTimeline.addCallback(myFunction, "myLabel")</code> would call it at the "myLabel" label.
|
|
</td></tr><tr><td class="paramSpacer"> </td></tr><tr><td width="20px"></td><td><code><span class="label">params</span>:Array</code> (default = <code>null</code>)<code></code> — An Array of parameters to pass the callback
|
|
</td></tr><tr><td class="paramSpacer"> </td></tr><tr><td width="20px"></td><td><code><span class="label">scope</span>:*</code> (default = <code>null</code>)<code></code> — The scope in which the callback should be called (basically, what "this" refers to in the function). NOTE: this parameter only pertains to the JavaScript and AS2 versions; it is omitted in AS3.
|
|
</td></tr></table></p><p></p><span class="label">Returns</span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20"></td><td><code><a href="../../com/greensock/TimelineMax.html">TimelineMax</a></code> — self (makes chaining easier)
|
|
|
|
</td></tr></table><p><span class="label">See also</span></p><div class="seeAlso"><a href="TimelineMax.html#call()" target="">call()</a><br/><a href="TimelineMax.html#insert()" target="">insert()</a><br/><a href="TimelineMax.html#append()" target="">append()</a><br/><a href="TimelineMax.html#removeCallback()" target="">removeCallback()</a></div></div><a name="currentLabel()"></a><a name="currentLabel(String)"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">currentLabel</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">method</td><td class="detailHeaderRule"> </td></tr></table><div class="detailBody"><code> public function currentLabel(value:String = null):*</code><p></p><p></p><p>
|
|
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).
|
|
|
|
<p>This method serves as both a getter and setter. Omitting the parameter returns the current
|
|
value (getter), whereas defining the parameter sets the value (setter) and returns the instance
|
|
itself for easier chaining.</p>
|
|
|
|
</p><p><span class="label"> Parameters </span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20px"></td><td><code><span class="label">value</span>:String</code> (default = <code>null</code>)<code></code> — Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining.
|
|
</td></tr></table></p><p></p><span class="label">Returns</span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20"></td><td><code>*</code> — Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining.
|
|
|
|
</td></tr></table><p><span class="label">See also</span></p><div class="seeAlso"><a href="TimelineMax.html#getLabelAfter()" target="">getLabelAfter()</a><br/><a href="TimelineMax.html#getLabelBefore()" target="">getLabelBefore()</a></div></div><a name="getActive()"></a><a name="getActive(Boolean,Boolean,Boolean)"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">getActive</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">method</td><td class="detailHeaderRule"> </td></tr></table><div class="detailBody"><code> public function getActive(nested:Boolean = true, tweens:Boolean = true, timelines:Boolean = false):Array</code><p></p><p></p><p>
|
|
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.
|
|
|
|
</p><p><span class="label"> Parameters </span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20px"></td><td><code><span class="label">nested</span>:Boolean</code> (default = <code>true</code>)<code></code> — Determines whether or not tweens and/or timelines that are inside nested timelines should be returned. If you only want the "top level" tweens/timelines, set this to <code>false</code>.
|
|
</td></tr><tr><td class="paramSpacer"> </td></tr><tr><td width="20px"></td><td><code><span class="label">tweens</span>:Boolean</code> (default = <code>true</code>)<code></code> — Determines whether or not tweens (TweenLite and TweenMax instances) should be included in the results
|
|
</td></tr><tr><td class="paramSpacer"> </td></tr><tr><td width="20px"></td><td><code><span class="label">timelines</span>:Boolean</code> (default = <code>false</code>)<code></code> — Determines whether or not child timelines (TimelineLite and TimelineMax instances) should be included in the results
|
|
</td></tr></table></p><p></p><span class="label">Returns</span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20"></td><td><code>Array</code> — an Array of active tweens/timelines
|
|
</td></tr></table></div><a name="getLabelAfter()"></a><a name="getLabelAfter(Number)"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">getLabelAfter</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">method</td><td class="detailHeaderRule"> </td></tr></table><div class="detailBody"><code> public function getLabelAfter(time:Number):String</code><p></p><p></p><p>
|
|
Returns the next label (if any) that occurs <b>after</b> the <code>time</code> parameter.
|
|
It makes no difference if the timeline is reversed ("after" means later in the timeline's local time zone).
|
|
A label that is positioned exactly at the same time as the <code>time</code> parameter will be ignored.
|
|
|
|
<p>You could use <code>getLabelAfter()</code> in conjunction with <code>tweenTo()</code> to make
|
|
the timeline tween to the next label like this:</p>
|
|
|
|
<p><code>
|
|
myTimeline.tweenTo( myTimeline.getLabelAfter() );
|
|
</code></p>
|
|
|
|
</p><p><span class="label"> Parameters </span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20px"></td><td><code><span class="label">time</span>:Number</code> (default = <code>NaN</code>)<code></code> — Time after which the label is searched for. If you do not pass a time in, the current time will be used.
|
|
</td></tr></table></p><p></p><span class="label">Returns</span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20"></td><td><code>String</code> — Name of the label that is after the time passed to getLabelAfter()
|
|
|
|
</td></tr></table><p><span class="label">See also</span></p><div class="seeAlso"><a href="TimelineMax.html#getLabelBefore()" target="">getLabelBefore()</a><br/><a href="TimelineMax.html#currentLabel()" target="">currentLabel()</a></div></div><a name="getLabelBefore()"></a><a name="getLabelBefore(Number)"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">getLabelBefore</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">method</td><td class="detailHeaderRule"> </td></tr></table><div class="detailBody"><code> public function getLabelBefore(time:Number):String</code><p></p><p></p><p>
|
|
Returns the previous label (if any) that occurs <b>before</b> the <code>time</code> parameter.
|
|
It makes no difference if the timeline is reversed ("before" means earlier in the timeline's local time zone).
|
|
A label that is positioned exactly at the same time as the <code>time</code> parameter will be ignored.
|
|
|
|
<p>You could use <code>getLabelBefore()</code> in conjunction with <code>tweenTo()</code> to make
|
|
the timeline tween back to the previous label like this:</p>
|
|
|
|
<p><code>
|
|
myTimeline.tweenTo( myTimeline.getLabelBefore() );
|
|
</code></p>
|
|
|
|
</p><p><span class="label"> Parameters </span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20px"></td><td><code><span class="label">time</span>:Number</code> (default = <code>NaN</code>)<code></code> — Time before which the label is searched for. If you do not pass a time in, the current time will be used.
|
|
</td></tr></table></p><p></p><span class="label">Returns</span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20"></td><td><code>String</code> — Name of the label that is before the time passed to getLabelBefore()
|
|
|
|
</td></tr></table><p><span class="label">See also</span></p><div class="seeAlso"><a href="TimelineMax.html#getLabelBefore()" target="">getLabelBefore()</a><br/><a href="TimelineMax.html#currentLabel()" target="">currentLabel()</a></div></div><a name="getLabelsArray()"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">getLabelsArray</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">method</td><td class="detailHeaderRule"> </td></tr></table><div class="detailBody"><code> public function getLabelsArray():Array</code><p></p><p></p><p>
|
|
Returns an Array of label objects, each with a "time" and "name" property, in the order that they occur in the timeline.
|
|
For example, to loop through all the labels in order and <code>trace()</code> them to the screen (or <code>console.log()</code> in JavaScript):
|
|
|
|
<div class="listing" version="3.0"><pre>
|
|
var labels = myTimeline.getLabelsArray();
|
|
for (var i = 0; i < labels.length; i++) {
|
|
trace("label name: " + labels[i].name + ", time: " + labels[i].time); //or in JS, console.log("label name: " + labels[i].name + ", time: " + labels[i].time);
|
|
}
|
|
</pre></div>
|
|
<p>Note: changing the values in this array will have no effect on the actual labels inside the TimelineMax. To add/remove labels,
|
|
use the corresponding methods (<code>addLabel(), removeLabel()</code>).</p>
|
|
|
|
</p><p></p><span class="label">Returns</span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20"></td><td><code>Array</code> — An array of generic objects (one for each label) with a "name" property and a "time" property in the order they occur in the TimelineMax.
|
|
</td></tr></table></div><a name="invalidate()"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">invalidate</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">method</td><td class="detailHeaderRule"> </td></tr></table><div class="detailBody"><code>override public function invalidate():*</code><p></p><p></p><p>
|
|
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. When you <code>invalidate()</code>
|
|
an animation, it will be re-initialized the next time it renders and its <code>vars</code> object will be re-parsed.
|
|
The timing of the animation (duration, startTime, delay) will not be affected.
|
|
|
|
<p>Another example would be if you have a <code>TweenMax(mc, 1, {x:100, y:100})</code> that ran when mc.x and mc.y
|
|
were initially at 0, but now mc.x and mc.y are 200 and you want them tween to 100 again, you could simply
|
|
<code>invalidate()</code> the tween and <code>restart()</code> it. Without invalidating first, restarting it
|
|
would cause the values jump back to 0 immediately (where they started when the tween originally began).
|
|
When you invalidate a TimelineLite/TimelineMax, it automatically invalidates all of its children.</p>
|
|
</p><p></p><span class="label">Returns</span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20"></td><td><code>*</code> — self (makes chaining easier)
|
|
</td></tr></table></div><a name="progress()"></a><a name="progress(Number)"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">progress</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">method</td><td class="detailHeaderRule"> </td></tr></table><div class="detailBody"><code>override public function progress(value:Number):*</code><p></p><p></p><p>
|
|
Gets or sets the timeline's progress which is a value between 0 and 1 indicating the position
|
|
of the virtual playhead (<b>excluding</b> repeats) where 0 is at the beginning, 0.5 is halfway complete,
|
|
and 1 is complete. If the timeline has a non-zero <code>repeat</code> defined, <code>progress</code>
|
|
and <code>totalProgress</code> will be different because <code>progress</code> doesn't include any
|
|
repeats or repeatDelays whereas <code>totalProgress</code> does. For example, if a TimelineMax instance
|
|
is set to repeat once, at the end of the first cycle <code>totalProgress</code> would only be 0.5
|
|
whereas <code>progress</code> would be 1. If you watched both properties over the course of the entire
|
|
animation, you'd see <code>progress</code> go from 0 to 1 twice (once for each cycle) in the
|
|
same time it takes the <code>totalProgress</code> to go from 0 to 1 once.
|
|
|
|
<p>This method serves as both a getter and setter. Omitting the parameter returns the current
|
|
value (getter), whereas defining the parameter sets the value (setter) and returns the instance
|
|
itself for easier chaining, like <code>myTimeline.progress(0.5).play();</code></p>
|
|
|
|
<div class="listing" version="3.0"><pre>
|
|
var progress = myTimeline.progress(); //gets current progress
|
|
myTimeline.progress( 0.25 ); //sets progress to one quarter finished
|
|
</pre></div>
|
|
|
|
</p><p><span class="label"> Parameters </span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20px"></td><td><code><span class="label">value</span>:Number</code> (default = <code>NaN</code>)<code></code> — Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining.
|
|
</td></tr></table></p><p></p><span class="label">Returns</span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20"></td><td><code>*</code> — Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining.
|
|
|
|
</td></tr></table><p><span class="label">See also</span></p><div class="seeAlso"><a href="TimelineMax.html#totalProgress()" target="">totalProgress()</a><br/><a href="TimelineMax.html#seek()" target="">seek()</a><br/><a href="TimelineMax.html#time()" target="">time()</a><br/><a href="TimelineMax.html#totalTime()" target="">totalTime()</a></div></div><a name="removeCallback()"></a><a name="removeCallback(Function,any)"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">removeCallback</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">method</td><td class="detailHeaderRule"> </td></tr></table><div class="detailBody"><code> public function removeCallback(callback:Function, timeOrLabel:* = null):<a href="../../com/greensock/TimelineMax.html">TimelineMax</a></code><p></p><p></p><p>
|
|
Removes a callback from a particular time or label. If the <code>timeOrLabel</code> parameter
|
|
is null, all callbacks of that function are removed from the timeline.
|
|
|
|
</p><p><span class="label"> Parameters </span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20px"></td><td><code><span class="label">callback</span>:Function</code> — callback function to be removed
|
|
</td></tr><tr><td class="paramSpacer"> </td></tr><tr><td width="20px"></td><td><code><span class="label">timeOrLabel</span>:*</code> (default = <code>null</code>)<code></code> — the time in seconds (or frames for frames-based timelines) or label from which the callback should be removed. For example, <code>myTimeline.removeCallback(myFunction, 3)</code> would remove the callback from 3-seconds into the timeline, and <code>myTimeline.removeCallback(myFunction, "myLabel")</code> would remove it from the "myLabel" label, and <code>myTimeline.removeCallback(myFunction, null)</code> would remove ALL callbacks of that function regardless of where they are on the timeline.
|
|
</td></tr></table></p><p></p><span class="label">Returns</span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20"></td><td><code><a href="../../com/greensock/TimelineMax.html">TimelineMax</a></code> — self (makes chaining easier)
|
|
|
|
</td></tr></table><p><span class="label">See also</span></p><div class="seeAlso"><a href="TimelineMax.html#addCallback()" target="">addCallback()</a><br/><a href="TimelineMax.html#call()" target="">call()</a><br/><a href="TimelineMax.html#killTweensOf()" target="">killTweensOf()</a></div></div><a name="repeat()"></a><a name="repeat(Number)"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">repeat</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">method</td><td class="detailHeaderRule"> </td></tr></table><div class="detailBody"><code> public function repeat(value:Number = 0):*</code><p></p><p></p><p>
|
|
Gets or sets the number of times that the timeline should repeat after its first iteration. For
|
|
example, if <code>repeat</code> is 1, the timeline will play a total of twice (the initial play
|
|
plus 1 repeat). To repeat indefinitely, use -1. <code>repeat</code> should always be an integer.
|
|
|
|
<p>To cause the repeats to alternate between forward and backward, set <code>yoyo</code> to
|
|
<code>true</code>. To add a time gap between repeats, use <code>repeatDelay</code>. You can
|
|
set the initial <code>repeat</code> value via the <code>vars</code> parameter, like:</p>
|
|
|
|
<p><code>
|
|
var tl = new TimelineMax({repeat:2});
|
|
</code></p>
|
|
|
|
<p>This method serves as both a getter and setter. Omitting the parameter returns the current
|
|
value (getter), whereas defining the parameter sets the value (setter) and returns the instance
|
|
itself for easier chaining, like <code>myTimeline.repeat(2).yoyo(true).play();</code></p>
|
|
|
|
<div class="listing" version="3.0"><pre>
|
|
var repeat = myTimeline.repeat(); //gets current repeat value
|
|
myTimeline.repeat(2); //sets repeat to 2
|
|
</pre></div>
|
|
|
|
</p><p><span class="label"> Parameters </span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20px"></td><td><code><span class="label">value</span>:Number</code> (default = <code>0</code>)<code></code> — Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining.
|
|
</td></tr></table></p><p></p><span class="label">Returns</span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20"></td><td><code>*</code> — Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining.
|
|
|
|
</td></tr></table><p><span class="label">See also</span></p><div class="seeAlso"><a href="TimelineMax.html#repeatDelay()" target="">repeatDelay()</a><br/><a href="TimelineMax.html#yoyo()" target="">yoyo()</a></div></div><a name="repeatDelay()"></a><a name="repeatDelay(Number)"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">repeatDelay</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">method</td><td class="detailHeaderRule"> </td></tr></table><div class="detailBody"><code> public function repeatDelay(value:Number = 0):*</code><p></p><p></p><p>
|
|
Gets or sets the amount of time in seconds (or frames for frames-based timelines) between repeats.
|
|
For example, if <code>repeat</code> is 2 and <code>repeatDelay</code> is 1, the timeline will
|
|
play initially, then wait for 1 second before it repeats, then play again, then wait 1 second
|
|
again before doing its final repeat. You can set the initial <code>repeatDelay</code> value
|
|
via the <code>vars</code> parameter, like:
|
|
|
|
<p><code>
|
|
var tl = new TimelineMax({repeat:2, repeatDelay:1});
|
|
</code></p>
|
|
|
|
<p>This method serves as both a getter and setter. Omitting the parameter returns the current
|
|
value (getter), whereas defining the parameter sets the value (setter) and returns the instance
|
|
itself for easier chaining, like <code>myTimeline.repeat(2).yoyo(true).repeatDelay(0.5).play();</code></p>
|
|
|
|
<div class="listing" version="3.0"><pre>
|
|
var repeatDelay = myTimeline.repeatDelay(); //gets current repeatDelay value
|
|
myTimeline.repeatDelay(2); //sets repeatDelay to 2
|
|
</pre></div>
|
|
|
|
</p><p><span class="label"> Parameters </span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20px"></td><td><code><span class="label">value</span>:Number</code> (default = <code>0</code>)<code></code> — Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining.
|
|
</td></tr></table></p><p></p><span class="label">Returns</span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20"></td><td><code>*</code> — Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining.
|
|
|
|
</td></tr></table><p><span class="label">See also</span></p><div class="seeAlso"><a href="TimelineMax.html#repeat()" target="">repeat()</a><br/><a href="TimelineMax.html#yoyo()" target="">yoyo()</a></div></div><a name="time()"></a><a name="time(Number,Boolean)"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">time</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">method</td><td class="detailHeaderRule"> </td></tr></table><div class="detailBody"><code>override public function time(value:Number, suppressEvents:Boolean = false):*</code><p></p><p></p><p>
|
|
Gets or sets the local position of the playhead (essentially the current time), <b>not</b>
|
|
including any repeats or repeatDelays. If the timeline has a non-zero <code>repeat</code>, its <code>time</code>
|
|
goes back to zero upon repeating even though the <code>totalTime</code> continues forward linearly
|
|
(or if <code>yoyo</code> is <code>true</code>, the <code>time</code> alternates between moving forward
|
|
and backward). <code>time</code> never exceeds the duration whereas the <code>totalTime</code> reflects
|
|
the overall time including any repeats and repeatDelays.
|
|
|
|
<p>For example, if a TimelineMax instance has a <code>duration</code> of 2 and a repeat of 3,
|
|
<code>totalTime</code> will go from 0 to 8 during the course of the timeline (plays once then
|
|
repeats 3 times, making 4 total cycles) whereas <code>time</code> would go from 0 to 2 a
|
|
total of 4 times.</p>
|
|
|
|
<p>This method serves as both a getter and setter. Omitting the parameter returns the current
|
|
value (getter), whereas defining the parameter sets the value (setter) and returns the instance
|
|
itself for easier chaining.</p>
|
|
|
|
<div class="listing" version="3.0"><pre>
|
|
var currentTime = myTimeline.time(); //gets current time
|
|
myTimeline.time(2); //sets time, jumping to new value just like seek().
|
|
</pre></div>
|
|
|
|
</p><p><span class="label"> Parameters </span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20px"></td><td><code><span class="label">value</span>:Number</code> (default = <code>NaN</code>)<code></code> — Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining. Negative values will be interpreted from the <b>END</b> of the animation.
|
|
</td></tr><tr><td class="paramSpacer"> </td></tr><tr><td width="20px"></td><td><code><span class="label">suppressEvents</span>:Boolean</code> (default = <code>false</code>)<code></code> — If <code>true</code>, no events or callbacks will be triggered when the playhead moves to the new position defined in the <code>value</code> parameter.
|
|
</td></tr></table></p><p></p><span class="label">Returns</span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20"></td><td><code>*</code> — Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining.
|
|
|
|
</td></tr></table><p><span class="label">See also</span></p><div class="seeAlso"><a href="TimelineMax.html#seek()" target="">seek()</a><br/><a href="TimelineMax.html#play()" target="">play()</a><br/><a href="TimelineMax.html#reverse()" target="">reverse()</a><br/><a href="TimelineMax.html#pause()" target="">pause()</a><br/><a href="TimelineMax.html#totalTime()" target="">totalTime()</a></div></div><a name="totalDuration()"></a><a name="totalDuration(Number)"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">totalDuration</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">method</td><td class="detailHeaderRule"> </td></tr></table><div class="detailBody"><code>override public function totalDuration(value:Number):*</code><p></p><p></p><p>
|
|
Gets or sets the total duration of the timeline in seconds (or frames for frames-based timelines)
|
|
<b>including</b> any repeats or repeatDelays. <code>duration</code>, by contrast, does
|
|
<b>NOT</b> include repeats and repeatDelays. For example, if the timeline has a
|
|
<code>duration</code> of 10, a <code>repeat</code> of 1 and a <code>repeatDelay</code> of 2,
|
|
the <code>totalDuration</code> would be 22.
|
|
|
|
<p>This method serves as both a getter and setter. Omitting the parameter returns the current
|
|
value (getter), whereas defining the parameter sets the value (setter) and returns the instance
|
|
itself for easier chaining.</p>
|
|
|
|
<div class="listing" version="3.0"><pre>
|
|
var total = myTimeline.totalDuration(); //gets total duration
|
|
myTimeline.totalDuration(10); //sets the total duration
|
|
</pre></div>
|
|
|
|
</p><p><span class="label"> Parameters </span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20px"></td><td><code><span class="label">value</span>:Number</code> (default = <code>NaN</code>)<code></code> — Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining. Negative values will be interpreted from the <b>END</b> of the animation.
|
|
</td></tr></table></p><p></p><span class="label">Returns</span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20"></td><td><code>*</code> — Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining.
|
|
|
|
</td></tr></table><p><span class="label">See also</span></p><div class="seeAlso"><a href="TimelineMax.html#duration()" target="">duration()</a><br/><a href="TimelineMax.html#timeScale()" target="">timeScale()</a></div></div><a name="totalProgress()"></a><a name="totalProgress(Number)"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">totalProgress</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">method</td><td class="detailHeaderRule"> </td></tr></table><div class="detailBody"><code> public function totalProgress(value:Number):*</code><p></p><p></p><p>
|
|
Gets or sets the timeline's totalProgress which is a value between 0 and 1 indicating the position
|
|
of the virtual playhead (<b>including</b> repeats) where 0 is at the beginning, 0.5 is
|
|
halfway complete, and 1 is complete. If the timeline has a non-zero <code>repeat</code> defined,
|
|
<code>progress</code> and <code>totalProgress</code> will be different because <code>progress</code>
|
|
doesn't include any repeats or repeatDelays whereas <code>totalProgress</code> does. For example,
|
|
if a TimelineMax instance is set to repeat once, at the end of the first cycle <code>totalProgress</code>
|
|
would only be 0.5 whereas <code>progress</code> would be 1. If you watched both properties over the
|
|
course of the entire animation, you'd see <code>progress</code> go from 0 to 1 twice (once for
|
|
each cycle) in the same time it takes the <code>totalProgress</code> to go from 0 to 1 once.
|
|
|
|
<p>This method serves as both a getter and setter. Omitting the parameter returns the current
|
|
value (getter), whereas defining the parameter sets the value (setter) and returns the instance
|
|
itself for easier chaining, like <code>myTimeline.totalProgress(0.5).play();</code></p>
|
|
|
|
<div class="listing" version="3.0"><pre>
|
|
var progress = myTimeline.totalProgress(); //gets total progress
|
|
myTimeline.totalProgress( 0.25 ); //sets total progress to one quarter finished
|
|
</pre></div>
|
|
|
|
</p><p><span class="label"> Parameters </span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20px"></td><td><code><span class="label">value</span>:Number</code> (default = <code>NaN</code>)<code></code> — Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining.
|
|
</td></tr></table></p><p></p><span class="label">Returns</span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20"></td><td><code>*</code> — Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining.
|
|
|
|
</td></tr></table><p><span class="label">See also</span></p><div class="seeAlso"><a href="TimelineMax.html#progress()" target="">progress()</a><br/><a href="TimelineMax.html#seek()" target="">seek()</a><br/><a href="TimelineMax.html#time()" target="">time()</a><br/><a href="TimelineMax.html#totalTime()" target="">totalTime()</a></div></div><a name="tweenFromTo()"></a><a name="tweenFromTo(any,any,Object)"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">tweenFromTo</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">method</td><td class="detailHeaderRule"> </td></tr></table><div class="detailBody"><code> public function tweenFromTo(fromTimeOrLabel:*, toTimeOrLabel:*, vars:Object = null):<a href="../../com/greensock/TweenLite.html">TweenLite</a></code><p></p><p></p><p>
|
|
Creates a linear tween that essentially scrubs the playhead from a particular time or label
|
|
to another time or label and then stops. If you plan to sequence multiple playhead tweens
|
|
one-after-the-other, <code>tweenFromTo()</code> is better to use than <code>tweenTo()</code>
|
|
because it allows the duration to be determined immediately, ensuring that subsequent tweens
|
|
that are appended to a sequence are positioned appropriately. For example, to make the
|
|
TimelineMax play from the label "myLabel1" to the "myLabel2" label, and then from "myLabel2"
|
|
back to the beginning (a time of 0), simply do:
|
|
|
|
<div class="listing" version="3.0"><pre>
|
|
var tl:TimelineMax = new TimelineMax();
|
|
tl.append( myTimeline.tweenFromTo("myLabel1", "myLabel2") );
|
|
tl.append( myTimeline.tweenFromTo("myLabel2", 0);
|
|
</pre></div>
|
|
|
|
<p>If you want advanced control over the tween, like adding an onComplete or changing the ease
|
|
or adding a delay, just pass in a vars object with the appropriate properties. For example,
|
|
to tween from the start (0) to the 5-second point on the timeline and then call a function
|
|
named <code>myFunction</code> and pass in a parameter that references this TimelineMax and
|
|
use a <code>StrongOut</code> ease, you'd do: </p>
|
|
|
|
<p><code>
|
|
myTimeline.tweenFromTo(0, 5, {onComplete:myFunction, onCompleteParams:[myTimeline], ease:StrongOut.ease});
|
|
</code></p>
|
|
|
|
<p>Remember, this method simply creates a TweenLite instance that tweens the <code>time()</code>
|
|
of your timeline. So you can store a reference to that tween if you want, and you can <code>kill()</code>
|
|
it anytime. Also note that <code>tweenFromTo()</code> does <b>NOT</b> affect the timeline's
|
|
<code>reversed</code> property. So if your timeline is oriented normally (not reversed) and you
|
|
tween to a time/label that precedes the current time, it will appear to go backwards but the
|
|
<code>reversed</code> property will <b>not</b> change to <code>true</code>. Also note that
|
|
<code>tweenFromTo()</code> pauses the timeline immediately before tweening its <code>time()</code>,
|
|
and it does not automatically resume after the tween completes. If you need to resume playback,
|
|
you can always use an onComplete to call the <code>resume()</code> method.</p>
|
|
|
|
</p><p><span class="label"> Parameters </span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20px"></td><td><code><span class="label">fromTimeOrLabel</span>:*</code> — The beginning time in seconds (or frame if the timeline is frames-based) or label from which the timeline should play. For example, <code>myTimeline.tweenTo(0, 5)</code> would play from 0 (the beginning) to the 5-second point whereas <code>myTimeline.tweenFromTo("myLabel1", "myLabel2")</code> would play from "myLabel1" to "myLabel2".
|
|
</td></tr><tr><td class="paramSpacer"> </td></tr><tr><td width="20px"></td><td><code><span class="label">toTimeOrLabel</span>:*</code> — The destination time in seconds (or frame if the timeline is frames-based) or label to which the timeline should play. For example, <code>myTimeline.tweenTo(0, 5)</code> would play from 0 (the beginning) to the 5-second point whereas <code>myTimeline.tweenFromTo("myLabel1", "myLabel2")</code> would play from "myLabel1" to "myLabel2".
|
|
</td></tr><tr><td class="paramSpacer"> </td></tr><tr><td width="20px"></td><td><code><span class="label">vars</span>:Object</code> (default = <code>null</code>)<code></code> — An optional vars object that will be passed to the TweenLite instance. This allows you to define an onComplete, ease, delay, or any other TweenLite special property. onInit is the only special property that is not available (<code>tweenFromTo()</code> sets it internally)
|
|
</td></tr></table></p><p></p><span class="label">Returns</span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20"></td><td><code><a href="../../com/greensock/TweenLite.html">TweenLite</a></code> — TweenLite instance that handles tweening the timeline between the desired times/labels.
|
|
|
|
</td></tr></table><p><span class="label">See also</span></p><div class="seeAlso"><a href="TimelineMax.html#tweenTo()" target="">tweenTo()</a><br/><a href="TimelineMax.html#seek()" target="">seek()</a></div></div><a name="tweenTo()"></a><a name="tweenTo(any,Object)"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">tweenTo</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">method</td><td class="detailHeaderRule"> </td></tr></table><div class="detailBody"><code> public function tweenTo(timeOrLabel:*, vars:Object = null):<a href="../../com/greensock/TweenLite.html">TweenLite</a></code><p></p><p></p><p>
|
|
Creates a linear tween that essentially scrubs the playhead to a particular time or label and
|
|
then stops. For example, to make the TimelineMax play to the "myLabel2" label, simply do:
|
|
|
|
<p><code>
|
|
myTimeline.tweenTo("myLabel2");
|
|
</code></p>
|
|
|
|
<p>If you want advanced control over the tween, like adding an onComplete or changing the ease or
|
|
adding a delay, just pass in a <code>vars</code> object with the appropriate properties. For example,
|
|
to tween to the 5-second point on the timeline and then call a function named <code>myFunction</code>
|
|
and pass in a parameter that's references this TimelineMax and use a <code>StrongOut</code> ease, you'd do:</p>
|
|
|
|
<p><code>
|
|
myTimeline.tweenTo(5, {onComplete:myFunction, onCompleteParams:[myTimeline], ease:StrongOut.ease});
|
|
</code></p>
|
|
|
|
<p>Remember, this method simply creates a TweenLite instance that pauses the timeline and then tweens
|
|
the <code>time()</code> of the timeline. So you can store a reference to that tween if you want, and
|
|
you can kill() it anytime. Also note that <code>tweenTo()</code> does <b>NOT</b> affect the timeline's
|
|
<code>reversed</code> state. So if your timeline is oriented normally (not reversed) and you tween to
|
|
a time/label that precedes the current time, it will appear to go backwards but the <code>reversed</code>
|
|
state will <b>not</b> change to <code>true</code>. Also note that <code>tweenTo()</code>
|
|
pauses the timeline immediately before tweening its <code>time()</code>, and it does not automatically
|
|
resume after the tween completes. If you need to resume playback, you could always use an onComplete
|
|
to call the timeline's <code>resume()</code> method.</p>
|
|
|
|
<p>If you plan to sequence multiple playhead tweens one-after-the-other, it is typically better to use
|
|
<code>tweenFromTo()</code> so that you can define the starting point and ending point, allowing the
|
|
duration to be accurately determined immediately.</p>
|
|
|
|
</p><p><span class="label"> Parameters </span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20px"></td><td><code><span class="label">timeOrLabel</span>:*</code> — The destination time in seconds (or frame if the timeline is frames-based) or label to which the timeline should play. For example, <code>myTimeline.tweenTo(5)</code> would play from wherever the timeline is currently to the 5-second point whereas <code>myTimeline.tweenTo("myLabel")</code> would play to wherever "myLabel" is on the timeline.
|
|
</td></tr><tr><td class="paramSpacer"> </td></tr><tr><td width="20px"></td><td><code><span class="label">vars</span>:Object</code> (default = <code>null</code>)<code></code> — An optional vars object that will be passed to the TweenLite instance. This allows you to define an onComplete, ease, delay, or any other TweenLite special property.
|
|
</td></tr></table></p><p></p><span class="label">Returns</span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20"></td><td><code><a href="../../com/greensock/TweenLite.html">TweenLite</a></code> — A TweenLite instance that handles tweening the timeline to the desired time/label.
|
|
|
|
</td></tr></table><p><span class="label">See also</span></p><div class="seeAlso"><a href="TimelineMax.html#tweenFromTo()" target="">tweenFromTo()</a><br/><a href="TimelineMax.html#seek()" target="">seek()</a></div></div><a name="yoyo()"></a><a name="yoyo(Boolean)"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">yoyo</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">method</td><td class="detailHeaderRule"> </td></tr></table><div class="detailBody"><code> public function yoyo(value:Boolean = false):*</code><p></p><p></p><p>
|
|
Gets or sets the timeline's <code>yoyo</code> state, where <code>true</code> causes
|
|
the timeline to go back and forth, alternating backward and forward on each
|
|
<code>repeat</code>. <code>yoyo</code> works in conjunction with <code>repeat</code>,
|
|
where <code>repeat</code> controls how many times the timeline repeats, and <code>yoyo</code>
|
|
controls whether or not each repeat alternates direction. So in order to make a timeline yoyo,
|
|
you must set its <code>repeat</code> to a non-zero value.
|
|
Yoyo-ing, has no affect on the timeline's "<code>reversed</code>" property. For example,
|
|
if <code>repeat</code> is 2 and <code>yoyo</code> is <code>false</code>, it will look like:
|
|
start - 1 - 2 - 3 - 1 - 2 - 3 - 1 - 2 - 3 - end. But if <code>yoyo</code> is <code>true</code>,
|
|
it will look like: start - 1 - 2 - 3 - 3 - 2 - 1 - 1 - 2 - 3 - end.
|
|
|
|
<p>You can set the <code>yoyo</code> property initially by passing <code>yoyo:true</code>
|
|
in the <code>vars</code> parameter, like: <code>new TimelineMax({repeat:1, yoyo:true});</code></p>
|
|
|
|
<p>This method serves as both a getter and setter. Omitting the parameter returns the current
|
|
value (getter), whereas defining the parameter sets the value (setter) and returns the instance
|
|
itself for easier chaining, like <code>myTimeline.yoyo(true).repeat(3).timeScale(2).play(0.5);</code></p>
|
|
|
|
<div class="listing" version="3.0"><pre>
|
|
var yoyo = myTimeline.yoyo(); //gets current yoyo state
|
|
myTimeline.yoyo( true ); //sets yoyo to true
|
|
</pre></div>
|
|
</p><p><span class="label"> Parameters </span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20px"></td><td><code><span class="label">value</span>:Boolean</code> (default = <code>false</code>)<code></code> — Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining.
|
|
</td></tr></table></p><p></p><span class="label">Returns</span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20"></td><td><code>*</code> — Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining.
|
|
|
|
</td></tr></table><p><span class="label">See also</span></p><div class="seeAlso"><a href="TimelineMax.html#repeat()" target="">repeat()</a><br/><a href="TimelineMax.html#repeatDelay()" target="">repeatDelay()</a></div></div><a name="includeExamplesSummary"></a><div class="detailSectionHeader">Examples</div><div class="detailBody">Sample code:<div class="listing" version="3.0"><pre>
|
|
//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.append( new TweenLite(mc, 1, {x:200, y:100}) );
|
|
|
|
//add another tween at the end of the timeline (makes sequencing easy)
|
|
tl.append( new TweenLite(mc, 0.5, {alpha:0}) );
|
|
|
|
//append a tween using the convenience method (shorter syntax) and offset it by 0.5 seconds
|
|
tl.to(mc, 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.insert( new TweenLite(mc, 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(mc2, 1, {x:200}));
|
|
tl.append(nested);
|
|
</pre></div>
|
|
|
|
<p><b>Copyright 2008-2012, GreenSock. All rights reserved.</b> This work is subject to the terms in <a href="http://www.greensock.com/terms_of_use.html" target="">http://www.greensock.com/terms_of_use.html</a> or for <a href="http://www.greensock.com/club/" target="">Club GreenSock</a> members, the software agreement that was issued with the membership.</p>
|
|
|
|
</div><br/><br/><hr><br/><p></p><center class="copyright"><footer></footer><br/>Thu Dec 20 2012, 04:30 PM -06:00 </center></div></body></html><!--<br/>Thu Dec 20 2012, 04:30 PM -06:00 --> |