TweenLite.set with TimelineLite

[danehansen]

i'm trying to set an intro animation for a component, and want parts to be hidden at the beginning of the animation. the goal is to have the component's css have nothing to do the animation so that when its done, the markup and styling looks as if we didn't use a transition. starting a TimelineLite instance with setting some instances to `visibility: hidden` seems to not have any result. a hack i have found to fix it, which i don't like, is to set the progress to 1 and then back to 0. i've included a jsfiddle link:

 

https://jsfiddle.net/37LL1atx/1/

See the Pen by 37LL1atx (@37LL1atx) on CodePen

[GreenSock]

Howdy Dane. Here's a solution:

https://jsfiddle.net/z6s9a54d/

 

A few things:

1. Most of this has to do with immediateRender. A set() call typically renders immediately by default. Your first one set visibility:hidden (good), but you had 2 more after that which had clearProps:visibility, meaning those completely wiped out what the first one did. You could set immediateRender:false on the two subsequent ones and you'd be fine. 
2. You're using a much longer syntax than you need. You could just use the convenience methods on timelines., like:

   //OLD:
   tl.add( TweenLite.set(...), 1);
   //NEW:
   tl.set(..., 1);

   Note that timeline.set() tries to figure out your intent and set immediateRender automatically - if it's at the very start of the timeline and it's not paused, immediateRender will be true, otherwise false. Another reason to use the convenience methods

3. There were some typos in your code (extra commas and missing semicolons)

Does that clear things up?

[danehansen]

ah thanks!

 

p.s. the linter i have been subject to for the last 2 years forced me to write code like that so its what i'm used to right now =/