siw Posted March 9, 2022 Share Posted March 9, 2022 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 1 Link to comment Share on other sites More sharing options...
Wizard of Oz Posted March 9, 2022 Share Posted March 9, 2022 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 More sharing options...
siw Posted March 9, 2022 Author Share Posted March 9, 2022 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 More sharing options...
Wizard of Oz Posted March 9, 2022 Share Posted March 9, 2022 I get the below Link to comment Share on other sites More sharing options...
siw Posted March 9, 2022 Author Share Posted March 9, 2022 oh sorry my mistake! should be verified now 😀 Link to comment Share on other sites More sharing options...
Wizard of Oz Posted March 9, 2022 Share Posted March 9, 2022 (edited) 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 1 Link to comment Share on other sites More sharing options...
OSUblake Posted March 9, 2022 Share Posted March 9, 2022 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. 2 Link to comment Share on other sites More sharing options...
siw Posted March 10, 2022 Author Share Posted March 10, 2022 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 More sharing options...
OSUblake Posted March 10, 2022 Share Posted March 10, 2022 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! 1 Link to comment Share on other sites More sharing options...
Mattrudd Posted March 15, 2022 Share Posted March 15, 2022 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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now