svg svg animations flick on safari

[siw]

hi,

i got a few animations linked to a scrolltrigger, which work absolutely fine with every browser. but in safari if the screen is over a certain width the animations sometimes start to flick or just lag. i already tried to just animate them automatically (without scrolltrigger), but it seems like not the scrolltrigger is the problem. 

 

i think that svg's require more performance in safari or something like that?

 

so the question is how can i fix my animations, for safari? it also seems like the animation works fine unless u got a 4k or higher screen.

 

thanks in advance!

See the Pen podXRQy by siw (@siw) on CodePen

[Wizard of Oz]

Works well in my safari. I have version 15.1. Maybe you have an older safari that needs an update?

[siw]

i got safari 15.2, i also tried it on many different devices - always the same problem.

 

you need to run the codepen on fullscreen on a display with high resolution then you should see the star lagging

[Wizard of Oz]

I get the below

 

 

[siw]

oh sorry my mistake!

should be verified now 😀

[Wizard of Oz]

I see the issue now. Seems to be a safari browser issue. Maybe this thread might help.

I actually tried the same animation without using SVG and it still has the same trouble on safari.

 

See the Pen mdBKwKq by martinkariuki7-the-looper (@martinkariuki7-the-looper) on CodePen

 

 

Edited March 9, 2022 by Wizard of Oz
Added Codepen

[OSUblake]

7 hours ago, siw said:

i think that svg's require more performance in safari or something like that?

 

Yes, SVG are the slowest to render, and GSAP has nothing to do with that. 1-2% of the workload might be GSAP, the rest is dependent on the browser, and animating a full screen SVG in 4k is going to bring performance issues. The only workaround is to use a faster renderer, like canvas or WebGL.

 

[siw]

alright, thought of that already! how can i accomplish a convert of svg to canvas? 

i heard of pixi.js already but are there simpler solution related to gsap animations?

 

thanks in advance!

[OSUblake]

Doing that animation in pure canvas in an optimized fashion would require a lot of canvas know-how. Definitely not something I would recommend unless you are very familiar with the canvas API and a good understanding of how to do transforms without a transform origin.

 

GSAP plays nicely with PixiJS and is probably the easiest way to do canvas related animations. We even have a plugin for it.

 

https://greensock.com/docs/v3/Plugins/PixiPlugin

 

Good luck!

[Mattrudd]

On 3/9/2022 at 9:43 AM, siw said:

hi,

i got a few animations linked to a scrolltrigger, which work absolutely fine with every browser. but in safari if the screen is over a certain width the animations sometimes start to flick or just lag. i already tried to just animate them automatically (without scrolltrigger), but it seems like not the scrolltrigger is the problem. 

 

i think that svg's require more performance in safari or something like that?

 

so the question is how can i fix my animations, for safari? it also seems like the animation works fine unless u got a 4k or higher screen.

 

thanks in advance!

@siw Just to say - love the effect, really creative!