Optimizing SVG logo animation

[jroncero 3 Likes (Newbie)]

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

[ohem 324 Likes (Leader)]

You can optimize the SVG itself using SVGO: https://jakearchibald.github.io/svgomg/

 

Here's my attempt at cleaning up the JavaScript a bit: 

See the Pen ojdPRp by ohem (@ohem) on CodePen

[Jonathan 5,176 Likes (Superhero)]

Hello jroncero, and Welcome to the GreenSock Forum!

 

Nice Job Ohem

 

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:

 

autoAlpha

• 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.

 

Resources:

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

 

Let us know if you have any more questions.

[jroncero 3 Likes (Newbie)]

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?

 

 

[Jonathan 5,176 Likes (Superhero)]

I would always use autoAlpha regardless.. autoAlpha is part of the CSSPlugin. So as long as it is loaded, then you are good to go!

 

GSAP CSSPlugin Docs: http://greensock.com...gins/CSSPlugin/