Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
CHS Digital

SVG rendering issue when animated

Recommended Posts

Hi all,


I seemed to have unearthed a bug on Chrome and Edge (webkit I think) where  staggered lines appear when and svg is animated down (specifically on scaling). The lines appear randomly (different on every load it seems) as it animates down to size. This appears to happen in webkit all of a sudden and was just going to see anyone has come across it at all and if you could propose a fix (be it a GSAP setting or CSS property)? My efforts so far have not done the trick.


The below codepen demonstrates a simplified example which I have slowed down using timescale (does show at 1x) and also repeated.


Any help would be greatly appreciated


See the Pen yLabwpJ by samwoodchs (@samwoodchs) on CodePen

Link to post
Share on other sites

Hey CHS Digital.


Perhaps it'd work better if you scaled the content within the SVG instead of the SVG itself? You could also try applying will-change: transform to the element(s) being transformed.


Unrelated but we recommend using the sleeker GSAP 3 syntax:


  • Like 4
Link to post
Share on other sites

Hi ZachSaucier


Thanks for your reply, your solution worked perfectly adding the will-change css property! Lifesaver!


Also thanks for the advice on upgrading GSAP - will look into doing that


Many thanks

Link to post
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.