Choppy animation in Safari

[Caroline_Portugal]

Hi guys, this animation works great in Chrome but is super choppy in Safari: 

 

Any ideas on how to fix the issue?

 

Any help is much appreciated!

 

Caroline

See the Pen PoLVomB by carolineportugal (@carolineportugal) on CodePen

[mvaneijgen]

Try adding svg * { will-change: transform; } or at least to the elements that that have their transforms goings to change. Is it choppy in Codepen or also in you live site? Because if It watch this in the debug view in codepen on Safari Version 17.2.1 it is perfectly smooth. 

 

Some side notes 

• TimelineMax hasn't been used since version 2 and we're currently at version 3.12.5! https://gsap.com/resources/3-migration/
• Instead of rolling your own break points in Javascript check out https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/ has a lot of niceties build in when working with GSAP
• You can add all your timelines in to a main timeline and then you can call mainTL.play() or .pause()

• If the text in the image is not going to change anymore, I would look in to rendering out .png (or maybe even .gif) and see how much bigger or smaller they are then your SVG, this might also improve performance, if that is still an issue. 

Hope it helps and happy tweening! 

[GreenSock]

Yeah, that choppiness has nothing to do with GSAP - welcome to the world of Safari rendering problems. Safari is notorious for really bad rendering problems, sluggishness, and odd behavior. You might want to consider animating PNG images with transparency rather than SVG because you're putting a LOT of pressure on the CPU for fabricating all those pixels. Raster images are much easier for the browser to push around. 

[Caroline_Portugal]

I appreciate you guys looking into this, thank you!