Jump to content
GreenSock

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

Phone Performance

Recommended Posts

Hi Guys,

I've built this animation of a pinata exploding. It looks great on desktop, but really, really sluggish on IPhone and IPad. Does anyone have any tips on improving performance? Is it my code, or just too many tweens going on at once?

 

Thank you,

Dave Rodman

See the Pen wJMjOK by Roddyguy (@Roddyguy) on CodePen

Link to comment
Share on other sites

just too many tweens going on at once?

 

 

Yep.

  • Like 1
Link to comment
Share on other sites

Silliness aside...

 

It's actually because you're animating a load of SVG paths. The browser has to calculate each and every one of those paths individually before rendering. The more points, the more expensive is the computation. On top of that, SVG is not GPU accelerated so, it is really expensive to animate it. I know it is all the rage nowadays but really SVG is something that needs to be carefully considered before animating.

 

Ways to improve performance:

 

Use the <use> element, that should help a tiny bit.

 

Make those <path> a single SVG and use them as images. That'll be treated as a DOM element and offloaded to the GPU

 

Use <canvas> Look at PaperJS or PixiJS, they'll be far more performant.

  • Like 3
Link to comment
Share on other sites

[EDIT: Dipscom and I wrote our posts simultaneously....ha, we basically said the same thing]

 

It's not about the number of tweens - it's about the heavy graphics rendering load caused by using so many SVG elements. I'd bet that less than 1% of the load is GSAP updating (animating) the properties and over 99% is the browser trying to calculate all the repaint pixels (totally unrelated to GSAP). Remember, most browsers cannot GPU-accelerate SVG elements. You'd likely get much better performance if it was rebuilt in <canvas> using PIXI as the renderer and still using GSAP to animate everything. 

  • Like 3
Link to comment
Share on other sites

Nice demo! Here's the thread explaining how it works.

https://greensock.com/forums/topic/15313-how-to-explode-svg-in-particles-from-center/

 

For Pixi, you can use SVGs, but you'd probably have to make each piece a unique texture. Simple example of an SVG texture...

See the Pen ebeeff64ff0d097b5e3730c70a22497e?editors=0010 by osublake (@osublake) on CodePen

 

From there you could easily scale it up to handle thousands of animations...

See the Pen 9033dcadac5519a9a2222264aa5be236?editors=0010 by osublake (@osublake) on CodePen

.

  • Like 1
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.
×