Jump to content
GreenSock

danehansen

TweenLite.set with TimelineLite

Recommended Posts

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

Link to comment
Share on other sites

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?

  • Like 3
Link to comment
Share on other sites

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 =/

  • Like 1
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.
×