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: http://codepen.io/vincentriemer/pen/obcAm
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?