property set from css will get gsap performance?

[aboutjquery 0 Likes (Newbie)]

hello, thanks for this awesome GSAP

 

i have one question, a simple code as below

    var tl = new TimelineLite();
    TweenMax.set($a, {autoAlpha: 0, display: 'none', top: 100});
    tl.staggerTo($a, 1, {autoAlpha: 1, top: 0, display: ''}, 0.2);
    tl.play();

staggerFrom seem better for my code but i cant get it work, i will try again late

 

so now i set the $a property by TweenMax first.

 

if i set the property by css file not by TweenMax, and then play with TimelineLite, will i get the nice performance from gsap too?

 

e.g set translate, opacity, z-index, scale etc

 

any different between set property from css / TweenMax? which one is better?

 

sorry for my language skill, thanks so much

 

[Carl 9,720 Likes (Superhero)]

Hi and welcome to the GreenSock forums.

Here is how I would staggerFrom autoAlpha:0

 

http://codepen.io/GreenSock/pen/PqWyax

 

notice the CSS sets visbility:hidden

This helps hide the boxes BEFORE the javascript is loaded and executed (which always takes some amount of time and happens after HTML is rendered)

 

then I tween from autoAlpha:0

tl.staggerFrom(".box", 1, {autoAlpha:0}, 0.5);

which sets visbility:inherit in the elements inlines style (this making it visible as long as the parent is visible).

 

 

It is absolutely fine to set values with CSS and then tween them with GSAP.

Using CSS is going to be a little bit faster just because doing it with JavaScript is just one more layer of finding things and setting values.

The way GSAP is optimized though, it will be quite rare to find set() to be slow.