Immediate application of TimelineLite.staggerFromTo properties?

[Casey]

Getting started with the JS version of the platform, good stuff! Is there a way or recommended technique for applying css settings immediately when using staggering?

 

I have some elements that need to be hidden until they're animated in with staggering and I'd rather not clutter the css with opacity, etc just for tweens' sake...

 

I wrote a timeline/transition plugin for jQuery a while back and added added a special property of "applyProperties:true" to the vars object in the case of a "from" tween... so if there were delays or whatever it would prep things...

 

Thanks!

[Casey]

Ah, looks like immediateRender:true does the trick nicely. Woot.

[Carl]

Hi Casey and Welcome to the GreenSock forums!

 

It sounds like you are referring to the immediateRender property.

 

immediateRender : Boolean - Normally when you create a tween, it begins rendering on the very next frame (update cycle) unless you specify a delay. However, if you prefer to force the tween to render immediately when it is created, setimmediateRender to true. Or to prevent a from() from rendering immediately, set immediateRender to false. By default, from() tweens set immediateRender to true.

 

tl.staggerFromTo(element, 1, {css:{alpha:0}}, {css: {alpha:1}, immediateRender: true} )

 

note immediateRender goes inside the "to" vars but outside the css object.

 

here's a live demo: http://jsfiddle.net/...bassador/p7aVP/

 

-Carl

 

btw. thanks again for helping with the downloads issue

[Casey]

Hah! Thanks Carl, I actually put in in the from object and it worked out wonderfully. Appreciate the reply.