SVG loads scaled crispy & lovely, gets blurry on pause

[Good Looking Software]

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:

 

http://catalyst.goodlookingsoftware.com/a/

 

Thanks again!

Aaron

[PointC]

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.

[Good Looking Software]

PointC,

 

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

 

Aaron

[Good Looking Software]

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.

[Jonathan]

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

 

force3D

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