Jump to content

Good Looking Software

SVG loads scaled crispy & lovely, gets blurry on pause

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have an animation with lots of SVGs. They are rendered beautifully, scaled up and everything, on initial load. Once you move forward or backwards in the animation (by clicking one of the big blue arrows or a light brown mangrove root), the roots become blurry, especially the ones closest to you, even after the animation has completed.


The animation is mostly one timeline which loops. It begins paused. The motion is created by advancing in time in the timeline by passing a value to pause.


I looked around online and saw some suggestions like setting transform3d to auto, but that didn't work for me. I'm hoping this is a familiar problem to you veteran animators.


I've attached a before (left) and after (right) picture but looking at the animation is probably the easiest way to see the behavior:




Thanks again!



Link to comment
Share on other sites

Hey there :),


I took a look at your site and I see the blurriness in Chrome, but it's sharp for me in Firefox and IE. 


I think you're seeing the Safari and Chrome (webkit) bug of blurring while upscaling.


You mentioned setting force3D to auto, but force3D defaults to auto so you may want to try force3D:false.


I hope this helps.

  • Like 3
Link to comment
Share on other sites



Just saw your post. I'll try that out tomorrow and let you know if it worked. Thanks!



Link to comment
Share on other sites

I tried force3D false and true and neither seemed to have an effect. If this is a known work-around to the webkit bug, I must be doing it wrong.

Link to comment
Share on other sites

force3D is part of the GSAP CSSPlugin. You would apply like PointC advised .. force3D:false on the tween that is using scale.



  • As of 1.15.0, force3D defaults to "auto" mode which means transforms are automatically optimized for speed by using matrix3d() instead of matrix(), or translate3d() instead of translate(). This typically results in the browser putting that element onto its own compositor layer, making animation updates more efficient. In "auto" mode, GSAP will automatically switch back to 2D when the tween is done (if 3D isn't necessary) to free up more GPU memory. If you'd prefer to keep it in 3D mode, you can set force3D:true. Or, to stay in 2D mode whenever possible, set force3D:false. See http://css-tricks.com/myth-busting-css-animations-vs-javascript/ for more details about performance.

This webkit bug is a antialias bug that effect elements with text, <img> tags, and background-image CSS property. Even if you are referencing a SVG file. This bug will show it self in webkit due to CSS 3D transforms.


So if i was scaling a div element, i would add force3D:false like this:

TweenMax.to(".target", 3, {scale:2, force3D:false});

If this does not help.. then please set up a reduced codepen example so we can see and test your code live.


  • Like 2
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.