Poor performance on mobile safari (both iPad and iPhone) when animating SVG path's stroke-dashoffset.

[Vincent Riemer]

Hello there,

 

So I've been working on an outline drawing animation using gsap and svg that involves animating the stroke-dashoffset of <path>'s and the width of <rect>'s.

 

This runs great on my desktop and laptop but when it comes to mobile performance it really starts to chug. I've also noticed that if I remove the paths from the animation the performance skyrockets but when I remove the rects (and even reduce the number of paths to the number of rects there are) the performance is still not great.

 

A last thing that I noticed is that the animation's performance seemed to get get worse over time on my mobile devices (iphone 5 and ipad 3rd generation) which to me feels like a memory leak of some sort.

 

Here's a codepen of the animation: 

See the Pen obcAm by vincentriemer (@vincentriemer) on CodePen

 

Do you guys have any suggestions on improving this animation's performance? If not I'll probably just disable the animation for mobile devices.

 

Thanks,

 

-Vincent

 

EDIT: Sorry it seems like I posted this in the AS forum instead of the JS one, is there any way to delete/move this post to the JS forum?

[GreenSock]

This doesn't seem to have anything to do with GSAP specifically - I suspect it's just that drawing paths is a pretty CPU-intensive thing, and mobile devices have weak processors, hence the degraded performance. I didn't notice any particular mistakes/problems in your code, although setting force3D on an element's style object is useless. 

[Vincent Riemer]

Alright I just wanted to make sure there wasn't anything I could do better. Thanks for the reply!