Jump to content
Search Community

Questions About Performance / Best Practices

pmillerk88 test
Moderator Tag

Recommended Posts

I posted here last week looking for guidance and learned quite a lot from the moderators here. I've done some work on the pen from the previous thread and converted all the jQuery into Javascript and improved ( I think ) the general timeline of how the animation resolves itself. I am once again asking for your technical support. The result of my work is in the codepen preview below.

What I'm mostly interested in is learning what I've done that would be regarded as bad practice; what am I doing wrong, what can be done to improve performance, and do you have any tips on how to make the animations ( in general ) more fluid and interesting?

This is really an exercise in learning GSAPmore acutely and also improving my skills with Javascript, so any and all advice will mean a great deal. Thanks to the GSAP Moderator team for being huge boons in that regard.

See the Pen RwPGeEW by paulkmiller (@paulkmiller) on CodePen

Link to comment
Share on other sites

8 hours ago, pmillerk88 said:

what can be done to improve performance

 

Don't use SVG 🤷‍♂️

 

People always ask about how to improve their gsap code thinking it will improve performance. It usually won't. GSAP code is already optimized, so you really don't need to worry about it unless you're creating a bunch of animations or you're doing complicated stuff in onUpdate/ticker callbacks. That doesn't mean you can do whatever you want, it just means you typically don't need to worry about micro-optimizing it.

 

Performance problems are almost always related to what you are animating... like 99.9999% of the time. Not only the medium, like SVG, but what properties you are animating. For example, animating x/y is much faster than animating left/top.

 

The only thing I can really recommend changing in your code is to get rid of all your setTimeouts. It won't help with performance, but setTimeout is not synced with animations, and weird stuff can happen if you change tabs. Using .delayedCall() is better for animations.

https://greensock.com/docs/v3/GSAP/gsap.delayedCall()

 

Or even better. Just return timelines from your animateTrees function.

gsap.timeline()
  .add(animateTrees("start"))
  .add(animateTrees("end"))
  .call(destroyTrees, [15]);

 

Check out this article about using functions.

https://css-tricks.com/writing-smarter-animation-code/


And I would probably add all the html in one chunk for faster startup/parsing.

 

let html = "";
  
for (var i = 0; i < count; i++){
  html += Math.random() > 0.25 ? tree1 : tree2;
  // trees.insertAdjacentHTML('beforeend', Math.random() > 0.25 ? tree1 : tree2);
}
  
trees.insertAdjacentHTML('beforeend', html);

 

Also, you can cleanup your SVG strings by using template literals.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Multi-line_strings

 

var tree2 = `<svg class="tree" viewBox="15 -40 20 40">
  <path class="trunk" d="m25,22 l-0.5,15 a1,1 0 0,0 1,0 l-0.5,-15"/>
  <path d="m25,18 a10,10 0 0 1 -2,6" class="left"/>
  <path d="m25,21 a5,5 0 0 1 -2,3" class="left"/>
  <path d="m25,18 a15,15 0 0 0 3,9" class="right"/>
  <path d="m25,23 a6,6 0 0 0 2,3.5" class="right"/>
  <path d="m25,21 a8,8 0 0 1 -4,8" class="left"/>
  <path d="m25,23 a6,6 0 0 1 -3,6" class="left"/>
  <path d="m25,24 a9,9 0 0 0 6,8" class="right"/>
  <path d="m25,26 a8,8 0 0 0 5,6.5" class="right"/>
  <path d="m25,29 a8,8 0 0 0 3,3.5" class="right"/>
  <path d="m25,25 a9,9 0 0 1 -6,9" class="left"/>
  <path d="m25,27 a8,8 0 0 1 -5,7.5" class="left"/>
  <path d="m25,28 a7,7 0 0 1 -3,6.5" class="left"/>
 </svg>`;

 

 

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

As Blake said, the main performance issue is your heavy use of SVG (as I stated in your previous thread). Without doing that, you're pretty capped in terms of performance.

 

Side note: You don't need the new in new gsap.timeline(). tl = gsap.timeline() is perfect, the new doesn't do anything in this case.

 

Also unrelated to GSAP, but if you wanted to you could omit the window. for all window methods and properties. The only reason you would need to check is if you aren't sure if you're going to have access to the window object like using JS on the backend, but even then you would need to check if it exists or not.

  • Like 3
Link to comment
Share on other sites

A bit late to the responses @ZachSaucier & @OSUblake but thank you both very much for the responses. Blake gave me quite a bit to think about, and Zach, I know you said "Don't use SVG's" and "It's best animated on the Canvas" but I couldn't figure out how to do either very well. I'm still learning and my passion seems to point me to animations, so GSAP seemed like a natural library to dip my toes into. I've learned quite a lot already on this board and will take your advice accordingly. Thanks again to you both 😃

P.S. I admit, this is the first time I've ever heard of avoiding using SVG's for animation work.

Link to comment
Share on other sites

18 minutes ago, pmillerk88 said:

I know you said "Don't use SVG's" and "It's best animated on the Canvas" but I couldn't figure out how to do either very well.

 

I know it wont help you and may even confuse you further, but I just wanted to post this example to show you how fast canvas can execute.

 

See the Pen qpFIn by rlemon (@rlemon) on CodePen

  • Like 5
Link to comment
Share on other sites

@Shrug ¯\_(ツ)_/¯ You're right, this confused me further lol

I have a vague understanding of what's going on though. And it is kind of nuts that it loaded all of those elements so quickly. I'll have to spend some more time learning about how to manipulate canvas because as I understand it, all you can really do is overlay markup over it, and not necessary push it into the canvas for rendering. But this pen is clearly not doing that.. so yeah, much to study!

Link to comment
Share on other sites

A lot of people seem to have a problem with canvas because they are expecting to work with canvas like they do with HTML/SVG. Canvas is very low-level, so it might not be the easiest thing to jump into. On every animation frame, you typically have to erase everything, and tell the browser what to render as a series of drawing commands. 

 

Very basic intro comparing an svg animation to a canvas one.

 

See the Pen 5fa87bd01c260c9dbbafb38f173b2911 by osublake (@osublake) on CodePen

 

A more advanced comparison. I haven't converted it to v3 yet.

 

See the Pen WzbKLQ by osublake (@osublake) on CodePen

 

 

  • Like 4
Link to comment
Share on other sites

4 hours ago, pmillerk88 said:

P.S. I admit, this is the first time I've ever heard of avoiding using SVG's for animation work.

 

There are pros and cons to both approaches. I would mostly agree with the conclusion of this article is.

https://css-tricks.com/when-to-use-svg-vs-when-to-use-canvas/

 

Quote

SVG is the default choice; canvas is the backup

 

In gsap code, animating svg and canvas is basically the same. The big difference is that with canvas you have do all the rendering yourself, or use a canvas library that can do it for you.

 

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