Jump to content

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

property set from css will get gsap performance?

Recommended Posts

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);

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 :)


Link to post
Share on other sites

Hi and welcome to the GreenSock forums.

Here is how I would staggerFrom autoAlpha:0




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.

  • Like 1
Link to post
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.