Blurred image on scale animation, regardless of force3D: false

[gringo_pablo]

Hi,

 

I know there are numerous posts about this topic on the forum and I apologize for posting one more, but I reviewed all of them and couldn't find a solution working for me.

 

I have an image that is small at the beginning at the page and then reaches the viewport's width by the end of the page.

 

I added force3D:false hopping that it would resolve the issue of blurred animation, but it didn't.

I can't use the second solution consisting in putting the full image and using a "from" animation, because the image must be the viewport's width, which means it doesn't have absolute width.

 

Any idea?

 

See the Pen LYMKMVy by gringo_pablo (@gringo_pablo) on CodePen

[Rodrigo]

Hi,

 

I'm not seeing any blur in the image, maybe I'm missing something here 🤷‍♂️

 

Have you tried instead of using the SVG on an image tag, just use the SVG paths in your code? Since you already have the image data as SVG paths I'd go that route. That most likely will prevent any blurriness in your element.

 

Happy Tweening!

[gringo_pablo]

Hi,

 

Thanks for the reply!

 

Are you looking at it on Safari? That's where the problem occurs.

 

I tried adding it as pure SVG but it doesn't fix the issue....

[Rodrigo]

Hi,

 

Maybe set the image/element to use the full width, then use a set() instance to reduce it's scale and then create an instance that takes it back to scale 1:

gsap.set(image, {
  scale: 0.135,
  transformOrigin: "bottom left",
});

gsap.t(image, {
  scale: 1,
  transformOrigin: "bottom left",
  scrollTrigger: {
    // ScrollTrigger config here
  },
});

I can see the issue on an iPad on both chrome and safari, my best guess is that the browsers are taking a snapshot of the image and scaling it up messes the resolution of course. Now as far as I can tell that shouldn't happen at all with raw SVG on the HTML code.

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

Are you trying to do this?: 

See the Pen NWoKNvq by GreenSock (@GreenSock) on CodePen

[gringo_pablo]

Exactly! Thanks a lot for doing all the math!