why does TimelineMax.add *immediately* change my opacity?

[keldon]

I created a codepen here : 

See the Pen ?editors=011 by keldon (@keldon) on CodePen

 

My 'player' has a property 'timeline' which is a TimelineMax.

 

It is created paused and I have the player.timeline.play commented out on line 72.

 

My question is : why does the the '.add' call on line 142 immediately execute?

I would think it wouldn't execute until the parent timeline reaches the frameLabel 'frameDragon1'.

 

Thanks for any help,

Keldon

[Rodrigo]

Hi Keldon,

 

Thanks for providing the codepen, it was very helpful.

 

The issue is that the instance you're adding in that particular line lasts zero seconds, therefore the engine renders that one immediately by default. If you add immediateRender:false after the CSS Plugin object it should work as expected:

player.timeline.add( TweenLite.to( dragon1.stage, 0,
  {
    css :
      {
	opacity : 1,
	transformOrigin : "left top",
	scale : 0.65,
	rotation : 12.5
      },
      immediateRender:false
  } ), frameDragon1 )

Also as a suggestion you could use a set() instance instead a zero duration tween, it has the same effect:

player.timeline.add( TweenLite.set( dragon1.stage,
  {
    css :
      {
	opacity : 1,
	transformOrigin : "left top",
	scale : 0.65,
	rotation : 12.5
      },
      immediateRender:false
  } ), frameDragon1 )

Immediate render set to false tells GSAP to hold that particular instance's rendering until the timeline's playhead reaches that point instead of doing it on code execution.

 

Finally there's also a shorthand .set() methods for timelines, just like .to(), .from() and the stagger methods:

player.timeline.set(/*code here*/)

Rodrigo.

[keldon]

Thank you for the education!  That is very helpful and I totally get it now.