Timeline paused at odd time when adding tweenFromTo's

[gmullinix]

Running into a weird issue when adding multiple tweenFromTo's to a timeline.

 

What I expect to happen in the Codepen:

When I first load it, the blocks should be resting against the black line and not be skewed. tl_master and tl_base should be paused at 0.

 

What's actually happening:

The blocks are not touching the black line and are skewed. tl_base is paused at 0.5 seconds instead of 0.

 

It looks like tl_base is paused at the start of the final tweenFromTo added to tl_master (which is starting from 0.5 seconds). I don't understand why it's jumping there when I have both timelines paused and set to immediateRender: false.

 

I also tried adding a position parameter to the tweenFromTo's (thinking they were all being added at the same time and overlapping or something) but that did not fix the issue.

 

Please let me know if I can clarify anything.

See the Pen NrpmRo by gem0303 (@gem0303) on CodePen

[Jonathan]

Hello gmullinix and Welcome to the GreenSock Forum!

 

Try this:

 

See the Pen JKWqOa by jonathan (@jonathan) on CodePen

 

One thing i noticed is immediateRender is not a valid constructor property for the new TimelineMax() constructor.

 

immediateRender is used with from tweens and is passed inside the vars objects in your tween.

 

So in your case since you are using the tweenFromTo() method, your immediateRender:false should be inside the vars object that is inside your tweenFromTo() methods.

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

Look at the following:

// so this
tl_master.add( tl_base.tweenFromTo(0,1))

// becomes this
tl_master.add( tl_base.tweenFromTo(0,1,{immediateRender:false}))

And remove immediateRender:false from your new TimelineMax() constructor vars properties for tl_base and tl_master

// remove immediateRender:false from your new TimelineMax constructor
var tl_base = new TimelineMax({paused:true,immediateRender:false});
var tl_master = new TimelineMax({paused:true,immediateRender:false});

// should be without immediateRender, since it is not valid
var tl_base = new TimelineMax({paused:true});
var tl_master = new TimelineMax({paused:true});

And the tl_master tweenFromTo() tweens look like this

// change this
tl_master.add( tl_base.tweenFromTo(0,1))
         .add( tl_base.tweenFromTo(1,0))
         .add( tl_base.tweenFromTo(0,.5))
         .add( tl_base.tweenFromTo(0.5,0));

// to this with immediateRender:false
tl_master.add( tl_base.tweenFromTo(0,1,{immediateRender:false}))
         .add( tl_base.tweenFromTo(1,0,{immediateRender:false}))
         .add( tl_base.tweenFromTo(0,.5,{immediateRender:false}))
         .add( tl_base.tweenFromTo(0.5,0,{immediateRender:false}));

So after changing all of that above you should see it on the black line and not skewed..

 

Resources:

TimelineMax() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/

tweenFromTo() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/tweenFromTo/

 

[gmullinix]

Brilliant, thank you so much!

 

quick edit: 

You may want to consider updating this line of the documentation to specify that it is the indivdual tweenFromTo's that need to have the immediateRender set, instead of the timeline they're added to:

 

Like all from-type methods in GSAP, immediateRender is true by default, meaning the timeline will immediately jump to the "from" time/label unless you setimmediateRender:false

[Jonathan]

I understand where you got confused

 

On that tweenFromTo() page..  on the bottom it describes the immediateRender.. implying the vars object of the tweenFromTo() for the current page your on.

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

Also here is a great video on understanding immediateRender with from tweens:

 

 

If you go to the TimelineMax docs page you can see what constructor vars parameters it accepts for TimelineMax():

 

https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/

• delay : Number - Amount of delay in seconds (or frames for frames-based tweens) before the animation should begin.
• paused : Boolean - If true, the tween will pause itself immediately upon creation.
• onComplete : Function - A function that should be called when the animation has completed.
• onCompleteScope : Object - Defines the scope of the onComplete function (what "this" refers to inside that function).
• useFrames : Boolean - If useFrames is true, the tweens'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 duration and delay to be based on frames. An animations's timing mode is always determined by its parent timeline.
• tweens : Array - To immediately insert several tweens into the timeline, use the tweens special property to pass in an Array of TweenLite/TweenMax/TimelineLite/TimelineMax instances. You can use this in conjunction with the align and stagger special properties to set up complex sequences with minimal code. These values simply get passed to the add() method.align : String - Only used in conjunction with the tweens special property when multiple tweens are to be inserted immediately. The value simply gets passed to the add() method. The default is "normal". Options are:

• "sequence" : aligns the tweens one-after-the-other in a sequence
• "start" : aligns the start times of all of the tweens (ignores delays)
• "normal" : aligns the start times of all the tweens (honors delays)
• The align special property does not force all child tweens/timelines to maintain relative positioning, so for example, if you use "sequence" and then later change the duration of one of the nested tweens, it does not force all subsequent timelines to change their position. The align special property only affects the alignment of the tweens that are initially placed into the timeline through the tweens special property of the vars object.

• stagger : Number - Only used in conjunction with the tweens 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 useFrames is true). For example, if the stagger value is 0.5 and the "align" property is set to "start", the second tween will start 0.5 seconds after the first one starts, then 0.5 seconds later the third one will start, etc. If the align property is "sequence", there would be 0.5 seconds added between each tween. This value simply gets passed to the add() method. Default is 0.
• onStart : Function - A function that should be called when the tween begins (when its time changes from 0 to some other value which can happen more than once if the tween is restarted multiple times).
• onStartScope : Object - Defines the scope of the onStart function (what "this" refers to inside that function).
• onUpdate : Function - A function that should be called every time the animation updates (on every frame while the animation is active).
• onUpdateScope : Object - Defines the scope of the onUpdate function (what "this" refers to inside that function).
• onRepeat : Function - A function that should be called each time the animation repeats.
• onRepeatScope : Object - Defines the scope of the onRepeat function (what "this" refers to inside that function).
• onReverseComplete : Function - A function that should be called when the tween has reached its beginning again from the reverse direction. For example, if reverse() is called the tween will move back towards its beginning and when itstime reaches 0, onReverseComplete will be called. This can also happen if the tween is placed in a TimelineLite or TimelineMax instance that gets reversed and plays the tween backwards to (or past) the beginning.
• onReverseCompleteScope : Object - Defines the scope of the onReverseComplete function (what "this" refers to inside that function).
• autoRemoveChildren : Boolean - If autoRemoveChildren is set to true, 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 reverse() or set the progress lower, etc.). It can, however, improve speed and memory management. The root timelines use autoRemoveChildren:true.
• smoothChildTiming : Boolean - 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. For example, imagine that the timeline's playhead is on a child tween that is 75% complete, moving element's left from 0 to 100 and then that tween's reverse() method is called. If smoothChildTiming is false (the default except for the root timelines), the tween would flip in place, keeping its startTime 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. element's left would jump from 75 to 25, but the tween's position in the timeline would remain consistent. However, if smoothChildTiming is true, that child tween's startTime would be adjusted so that the timeline's playhead intersects with the same spot on the tween (75% complete) as it had immediately before reverse() was called, thus playback appears perfectly smooth. element's left would still be 75 and it would continue from there as the playhead moves on, but since the tween is reversed now element's left will travel back towards 0 instead of 100. Ultimately it's a decision between prioritizing smooth on-the-fly playback (true) or consistent position(s) of child tweens/timelines (false). Some examples of on-the-fly changes to child tweens/timelines that could cause their startTime to change when smoothChildTiming is true are: reversed, timeScale, progress, totalProgress, time, totalTime, delay, pause, resume, duration, and totalDuration.
• repeat : Number - Number of times that the animation should repeat after its first iteration. For example, if repeat is 1, the animation will play a total of twice (the initial play plus 1 repeat). To repeat indefinitely, use -1. repeat should always be an integer.
• repeatDelay : Number - Number - Amount of time in seconds (or frames for frames-based tweens) between repeats. For example, if repeat is 2 and repeatDelay is 1, the animation will play initially, then wait for 1 second before it repeats, then play again, then wait 1 second again before doing its final repeat.
• yoyo : Boolean - If true, every other repeat cycle will run in the opposite direction so that the tween appears to go back and forth (forward then backward). This has no affect on the "reversed" property though. So if repeat is 2 and yoyo isfalse, it will look like: start - 1 - 2 - 3 - 1 - 2 - 3 - 1 - 2 - 3 - end. But if yoyo is true, it will look like: start - 1 - 2 - 3 - 3 - 2 - 1 - 1 - 2 - 3 - end.
• onCompleteParams : Array - An Array of parameters to pass the onComplete function. For example, new TimelineMax({onComplete:myFunction, onCompleteParams:["param1", "param2"]}); To self-reference the timeline instance itself in one of the parameters, use "{self}", like: onCompleteParams:["{self}", "param2"]
• onReverseCompleteParams : Array - An Array of parameters to pass the onReverseComplete function. For example, new TimelineMax({onReverseComplete:myFunction, onReverseCompleteParams:["param1", "param2"]}); To self-reference the timeline instance itself in one of the parameters, use "{self}", like: onReverseCompleteParams:["{self}", "param2"]
• onStartParams : Array - An Array of parameters to pass the onStart function. For example, new TimelineMax({onStart:myFunction, onStartParams:["param1", "param2"]}); To self-reference the timeline instance itself in one of the parameters, use "{self}", like: onStartParams:["{self}", "param2"]
• onUpdateParams : Array - An Array of parameters to pass the onUpdate function. For example, new TimelineMax({onUpdate:myFunction, onUpdateParams:["param1", "param2"]}); To self-reference the timeline instance itself in one of the parameters, use "{self}", like: onUpdateParams:["{self}", "param2"]
• onRepeatParams : Array - An Array of parameters to pass the onRepeat function. For example, new TimelineMax({repeat:3, onRepeat:myFunction, onRepeatParams:[mc, "param2"]}); To self-reference the timeline instance itself in one of the parameters, use "{self}", like: onRepeatParams:["{self}", "param2"]
• callbackScope : Object - The scope to be used for all of the callbacks (onStart, onUpdate, onComplete, etc.). The scope is what "this" refers to inside any of the callbacks. The older callback-specific scope properties (onStartScope, onUpdateScope, onCompleteScope, onReverseComplete, etc.) are deprecated but still work.