Jump to content
GreenSock

siw

svg animations flick on safari

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

oh sorry my mistake!

should be verified now 😀

Link to comment
Share on other sites

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 by Wizard of Oz
Added Codepen
  • Like 1
Link to comment
Share on other sites

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.

 

  • Like 2
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×