Jump to content
Search Community

property set from css will get gsap performance?

aboutjquery test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

 

Link to comment
Share on other sites

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.

  • 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.
×
×
  • Create New...