Jump to content
GreenSock

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

Performance of bouncing SVG images

Recommended Posts

Hi Guys, 

 

I'm another AS3 GSAP guy whose been lurking around for ages. I've always appreciated the work that Jack and the others do so... Thanks. 

 

Without further ado, I recently took on a project wherein some brand images are bouncing around in the background of a page. I produced the code that is in the attached https://codepen.io/lilolbear/pen/WNNGjzK but I am seeing my CPU/GPU usage spike when leaving the page idle. I thought that I'd better check with the gurus before releasing something that's going to kill some nice ladies phone. 

 

1000 foot view is that on init I build a container full of image elements with SVGs for their src and prime them with their first animation. The animations are to (somewhat) random x pos, y pos, scale, opacity, and rotation.  I am using the callback at the end of the animations to trigger getting a new animation and each is 30 to 60 seconds long. So my code only gets touched once every 30-60 seconds per icon. The random calculations are all simple arithmetic with a minimum number of calls to Math.random();

 

Help Please! Am I doing something terribly wrong? Should I be throttling something somewhere?

 

Thanks in Advance!

 

Share this post


Link to post
Share on other sites

Hey Sam, thanks for being a Business Green member! We couldn't do what we do without people like you.

 

Simply by adding will-change: opacity, transform; on .aicon I was able to get the GPU usage down from ~60% to ~16% on my PC in Chrome (compared to the "normal" ~1-2% that Chrome uses on a static page). 

 

I don't see any big red flags in your JS code. Maybe another forum member will spot something that I'm not seeing.

 

P.S. I think you'd love GSAP 3! It has built in utility functions that you could use for this sort of thing. You already have beta access as a Business Green member.

  • Like 3

Share this post


Link to post
Share on other sites

Thank you Zack. That did help. I'm glad to hear that I didn't make a poor chose with what to call in GSAP. Any other tips would be appreciated.

 

As for GSAP 3, what I have seen of it has me excited. I might do a performance profile of this same use case implemented in GSAP 3 to see if there's any boost. 

  • Like 1

Share this post


Link to post
Share on other sites
17 hours ago, Sam said:

As for GSAP 3, what I have seen of it has me excited. I might do a performance profile of this same use case implemented in GSAP 3 to see if there's any boost. 

For the record, I wouldn't expect GSAP 3 to deliver any noticeable gains in this animation because by FAR the biggest drain is the rendering load on the browser which is totally unrelated to GSAP. In other words, GSAP's work may account for less than 1% of the overall load on the browser, so even if GSAP was TWICE as fast (it's not), you'd only see a 0.5% increase in overall performance. 

 

But yeah, like @ZachSaucier said, there's a lot about GSAP 3 that could be useful to you, especially the utility methods. 👍

  • Like 2

Share this post


Link to post
Share on other sites
On 10/17/2019 at 4:35 PM, Sam said:

but I am seeing my CPU/GPU usage spike when leaving the page idle

 

When you say leaving the page idle..

  • do you mean leaving the page idle when the browser tab is active (selected) ??
  • or when it is not active (not selected) ??

Because if its when the browser tab is not active, then you can just pause your animation by checking the HTML5 Visibility API. And then when you give the browser tab focus, making it active again.. you can resume / play the animation.

 

Example of use:

 

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

 

Happy Tweening :)

 

  • Like 3

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×