Animating <circle> 'r' (radius) attribute inside <svg> <clipPath> is lagging on ios devices

[kwastaras]

I have an animation of <circle> elements inside <clipPath>, I need to scale them, so that initial position stays the same (scale from center), I can only achieve it by changing 'r' attribute, but on IOS devices it looks laggy, on android and windows all works great. I thought I can fix it by changing the 'transform:scale()' attribute instead of 'r', and giving the circle 'will-change:transform', but when I change 'transform' instead of 'r', initial position 'cx' and 'cy' changes. Is there a way I can optimize animation of 'r' attribute on IOS devices? Would be thankful of any help...

 

See the Pen vYVEbje by kwastaras1337 (@kwastaras1337) on CodePen

[Rodrigo]

Hi,

 

I’m not seeing a lot of issues on an iPad using iOS 16 in chrome, Firefox or safari.

 

If you’re using scale you can use the transform origin option in order to tell GSAP the origin point for the transform being applied. This seems to work 

tl.to(circlesTransform, {scale:2, transformOrigin:"center center"})

Hopefully this helps.

Happy Tweening!

[kwastaras]

@Rodrigo thank you so much! transformOrigin centers them when scaling, but when I use now scaling instead of changing radius, I have even more lags on mobiles, can I send you link to an actual website where this animation is used? maybe there are just too much circles and it's impossible to animate it ...

[Cassie]

Hi there! Sorry to hear you've run into some performance issues.

A lot of performance problems are down to how browsers and graphics rendering work which is quite a rabbithole, but here are some tips: 
 

1. Make sure you've set will-change: transform on the CSS of your moving elements. 
2. Animate transforms (like x, y) instead of layout-affecting properties like top/left. 
3. Avoid using CSS filters or things like blend modes. Those are crazy expensive for browsers to render.
4. Minimize the area of change. Imagine drawing a rectangle around the total area that pixels change on each tick - the bigger that rectangle, the harder it is on the browser to render. Again, this has nothing to do with GSAP - it's purely about graphics rendering in the browser. So be strategic about how you build your animations and try to keep the areas of change as small as you can.
5. If you're animating a lot of SVG elements, the SVG takes up a lot of screen space, or it's infinitely looping - it might be time to look at using canvas instead.

 

I hope this helps!  💚

[kwastaras]

@Cassie thank you very much, will-change:transform didn't work for <circle> element, I've rebuild animation with simple divs for iphone