lazyTween makes tweened element stay 1 frame even if I called pause(0);

[yanhkim]

Hi experts,

 

var tl = new TimelineMax({ useFrames: true });

var el = $('.tweened')[0];

tl.add(TweenLite.to(el, 10, { width: 300 }), 0);

 

tl.addCallback(function() {

  tl.pause(0);

}, 0);

 

expect: .tweened element rendered as frame 0

result: .tweened element rendered as frame 1

 

You can find working testcase in

 

----

 

As far as I inspected, TimelineLite.pause(0) triggers rendering lazyTween that is saved in frame 1. That makes .tweened element rendered as 1 frame. Even if timeline's time() returns 0.

 

I want to play timeline in advance, so I attached callback to make that remain in 0 frame.

 

 

Regards,

Namhoon

 

See the Pen vOrobO by yanhkim (@yanhkim) on CodePen

[GreenSock]

Good catch - we did need to alter one thing in the codebase to accommodate that edge case. It'll be fixed in the next version (you can preview an uncompressed version of TweenMax at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js). In the mean time, you can simply add TweenLite.render(); below your code, or just set lazy:false on that tween - either solution is fine in the current version.