Praz Posted September 2, 2022 Share Posted September 2, 2022 Hey Guys, I'm just starting to explore Greensock animation and have faced few cross browser compatibility issues with my code. I've built an animated banner which works perfectly fine on Chrome but has the animation is laggy on Safari and its worst in Firefox. I've included the codepen url. Please check the url in different browsers and you'll see the difference. Any help would be highly appreciated. See the Pen yLjLJaw by prajwolonta (@prajwolonta) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted September 3, 2022 Share Posted September 3, 2022 Hi and welcome to the GreenSock forums. The problem could be those filters you're using. I'm not an expert on SVG, but blur filters could be very expensive in terms of processing. Unfortunately I don't know what alternative to offer beyond using Canvas, which doesn't guarantee an excellent performance. Perhaps explore CSS filters and see if that improves something. I'll summon SVG experts @Cassie and @PointC, hoping that they can provide better input on the subject. Happy Tweening!!! 1 1 Link to comment Share on other sites More sharing options...
GreenSock Posted September 3, 2022 Share Posted September 3, 2022 Yep, filters are TERRIBLE for performance. It has nothing to do with GSAP - browsers just eat up a ton of resources trying to render filters and sometimes gradients as well. If there's any way you can use a raster image to "fake" stuff like that, it's almost always gonna perform way better. For example, take the image into Photoshop, blur it, and then use that copy of the image and crossfade between the blurred and non-blurred images. 1 1 Link to comment Share on other sites More sharing options...
Praz Posted September 4, 2022 Author Share Posted September 4, 2022 Thanks, @Rodrigo and @GreenSock for the pointing me to right direction. I did some clean up on the SVG with the filter and it now it works perfectly on FF and Safari too. Here's the updated Codepen: See the Pen Poewwbx?editors=1000 by prajwolonta (@prajwolonta) on CodePen 2 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