Jump to content
Search Community

Scaling SVG blurry

nicolasdesle test
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

Hi

 

 

First of all, an other big up to the greensock team for their excellent work, I am so happy my transition to HTML was hassle-free thanks to tweenmax!

 

When I upscale an SVG the SVG gets blurry while tweening. When it has finished tweening it gets crisp again.

Any workarounds?

 

Example: http://nicolasdesle.be/svgtest/

 

 

Thanks
Nicolas
Link to comment
Share on other sites

Hello nicolasdesle, and Welcome to the GreenSock forum!

 

What your seeing is a webkit browser bug, That is why you wont see that blurriness in Firefox. WebKit Apple and WebKit Chrome (Blink) have a bug when transforming text, img tags, and background-images.

 

So you need to add force3D:false to your tween. force3D is part of the GSAP CSSPlugin. This will fix that webkit bug. So your img tag (even though an svg) does not get blurry when transforming,

 

If possible to better help you. Can you please set up a codepen demo example. We love code we can test in a live editable environment. Since we really cant properly test your code the way it is right now on your server.

 

Here is a video tut by GreenSock on how to create a codepen demo example!

 

 

:)

  • Like 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.
×
×
  • Create New...