Mobile performance svg animation

[puluch]

Hey guys,

 

I'm animating a logo but i'm not really satisfied about the performances on mobile for the bubble animation (in my codepen, it's the "bubbleShot" function line 10, on the preview, you can click on the pipe to trigger it).

 

I searched a lot on the web to find how I could increase a bit performances : I only used transform / scale / opacity animation and as I red, it should not be as difficult to render.

 

Do I do something wrong  ? Is it because of the "complex" svg ? Any clue to improve performances ?

 

Thanks for your help !

See the Pen LZEaXN by XyBal (@XyBal) on CodePen

[Carl]

Nice demo, thanks for sharing.

 

I really can't see anything that you are doing wrong. In fact everything looks pretty much how I would do it. 

I tested on an iPhone 6 and didn't think the performance was at all bad. 

 

From what I know, SVG elements do not benefit the same way as DOM elements when applying 2D or 3D transforms so I don't think there is a silver bullet for getting better performnce regarding how your tweens are set up.

 

You might get a little boost from caching some SVG elements (like the bubbles) as bitmaps.

See this demo from Blake: http://codepen.io/osublake/pen/MwVymw?editors=0010

 

a bit more info:

http://greensock.com/forums/topic/14416-req-help-understanding-heavy-load-tweens/?p=61380

[OSUblake]

Another option is to create individual SVGs for everything you want to animate, wrap them in divs, and the animate the divs instead of the SVG element(s). It's not ideal, but it can provide a HUGE boost in performance because a div can be hardware accelerated through transforms.

[puluch]

Thanks for your answers, i'll try these solutions and let you know !

 

(Btw, i'm trying on an old xperia Z, that's how you try hard to get better performances   )

[puluch]

Well I tried both of your methods, I'll keep the both in mind for further tweens, but I think my phone simply can't be more fast. I have a really tiny change when I switch to bitmaps elements (but in my opinion and in my case, it's to much complexity for the poor gain of speed) but no change when switching to Blake's method.

 

Thanks a lot, it was interesting things to dig