Jump to content


Optimizing SVG logo animation

Go to solution Solved by ohem,

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

Here's my second try at learning/implementing GSAP after reading the Noble Desktop book. I was able to get the effect I wanted to work, but I suspect my code is probably bloated and redundant. I would appreciate any input on streamlining it.



This Logo intro will be used in all our banners campaigns and across all sizes. So it is critical to really optimize it. Thanks in advance!

See the Pen gazdPo by jroncero (@jroncero) on CodePen

Link to comment
Share on other sites

Hello jroncero, and Welcome to the GreenSock Forum!


Nice Job Ohem :D


I would add one more thing, To optimize even more you should use autoAlpha instead of opacity  and visiibility:hidden;


autoAlpha is part of the CSSPlugin .. it will automatically add visibility:hidden  to the tween after opacity  reaches 0 to optimize performance. When you use visibility in your to() or from() tween, GSAP is not really animating it, since it is a string value. It just applies to the style of the tag. So by using autoAlpha you will let GSAP set the visibility property for you depending on the state of the opacity.


See the Pen YyLmyZ by jonathan (@jonathan) on CodePen


Taken from CSSPlugin Docs:



  • Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.

Examples of autoAlpha usage:

//fade out and set visibility:hidden
TweenLite.to(element, 2, {autoAlpha:0});
//in 2 seconds, fade back in with visibility:visible
TweenLite.to(element, 2, {autoAlpha:1, delay:2});

When using autoAlpha,  you just can add visibility:hidden  for the initial state of the element, and then let GSAP manage the visibility  state by using autoAlpha.



GSAP CSSPlugin: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/


Let us know if you have any more questions.

  • Like 2
Link to comment
Share on other sites

Ohem, thanks for taking the time to rewrite the js. I will update my code with your insights. I notice it is much briefer and you did not have to rely on fromTo to get the same effect.


Jonathan, so if we are using Timelinemax, should autoAlpha be used always instead of opacity and visibility:hidden? Is there any instances where these 2 properties would be preferred?



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.