Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
keldon

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

Recommended Posts

I created a codepen here : 

See the Pen cGzid 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

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×