Jump to content


GSAP animation on different browser

Recommended Posts

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

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!!!

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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. 

  • Like 1
  • Thanks 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.