Jump to content
Search Community

Performance of bouncing SVG images

Sam 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

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 Codepen 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!

 

See the Pen WNNGjzK by lilolbear (@lilolbear) on CodePen

Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
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
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...