Scroll zoom-in to text/SVG problem

[danshk]

Hello community. I'm trying to implement an animation that has been talked about here more than once from the site 
https://lenis.darkroom.engineering where Enter Lenis is approaching us in the screen. I implemented the same "backing" and it worked fine until I started testing it in Safari browser and on mobile devices 
The issue is that as I get closer, the edges of my shape (SVG) start to blur and I can see the outlines are not clear. I tried to implement my shape as a normal text, but I faced the same problem, my outlines during the animation process become not clearly visible. 
I also tried to add will-change property, but with this property my edges become blurred even in Google Chrome browser where everything was fine before. What could be the problem? Thanks! 

 

Demo:

https://codesandbox.io/p/sandbox/scale-problem-tx8s3m?file=%2Fsrc%2FApp.tsx%3A32,11

 

Lenis Website:

https://lenis.darkroom.engineering

[Rodrigo]

Hi,

 

Actually if you inspect the lenis website you'll see that they're using an ::after pseudo element:

 

Have you tried masking? @mvaneijgen created this super useful thread on the subject, that could really help:

 

 

Happy Tweening!

[danshk]

11 hours ago, Rodrigo said:

Hi,

 

Actually if you inspect the lenis website you'll see that they're using an ::after pseudo element:

 

Have you tried masking? @mvaneijgen created this super useful thread on the subject, that could really help:

 

 

Happy Tweening!

Yes, in my full example I use "carpet pad" with clip-path, though it's not ::after but <div/> and it works fine. My question is exactly that during the skimming process, my SVG element lik, in some browsers (Safari) and on a mobile device shows jagged vector outlines, although this is contrary to vector graphics. And I can't understand what is the reason?

Here is an example picture from Safari, in the center you see my background and on the sides the element we are zooming in on. And now in Safari it's blurring the outline for some reason

[Rodrigo]

Yeah that sounds more like a browser rendering specific problem rather than a GSAP one, honestly I don't know what else can be done.

 

Maybe this threads can help:

 

 

Happy Tweening!

[GreenSock]

Yeah, that looks like a browser rendering thing, but you could try setting this on any transform-related animation: 

force3D: false

Does that help? 

[danshk]

14 hours ago, GreenSock said:

Yeah, that looks like a browser rendering thing, but you could try setting this on any transform-related animation: 

force3D: false

Does that help? 

Thank you so much, it really works for me!