GSAP V3, jittering / shake on font resize on chrome + webkit

[Yumigo]

Hey there !

 

this very simple fiddle will zoom a text out, filled with a texture.

 

Will play OK if Firerox (PC) but in Chrome (PC),  the text gets slightly shaky / jittered. It's a matter of 1 or 2 pixels but very noticeable on higher resolutions.

Any chance to avoid this ?

Thank you :-))

See the Pen 4 by yumigo (@yumigo) on CodePen

[ZachSaucier]

Hey Yumigo and welcome to the GreenSock forums. Thanks for being a Club GreenSock member!

 

First, a few notes about your GSAP code. 

• You don't need new before gsap.timeline(). In fact, you don't even need a timeline in this case since it's only one tween.
• You don't need to pass in a jQuery object, you can just pass in the selector string of "#productTitle1" and GSAP will automatically select all elements that match that selector string.
• If you aren't going to use the fromVars in your .fromTo(), you might as well just use a .to() instead to save you from having to type as much.
• Generally speaking it's more standard to include properties using camelCase than a string.
• For your eases, you should use either the condensed string form for eases (in this case "power4.inOut") or the longer object form (without eases - in this case Power4.easeInOut). 

Altogether it should look something like this: https://jsfiddle.net/y6uoegv2/

 

As for the jittering, that's unrelated to GSAP. It has to do with browser rendering error. There's a lot of threads and StackOverflow posts that you can look into to try and fix it. None of the common fixes seemed to take away the error for me. I'd recommend just creating the same effect using only SVG and SVG clip paths (not relying on background-clip). 

 

Possibly related threads:

 

[Yumigo]

Thank you very much for your guidelines and notes.

 

Yes my code has some useless code, it's because I oversimplifed a much heavier code.

thank you anyway for the other tips.

I've been searching and already read the suggested forum threads, but none of the workarounds works for me.

SVG is where I come from for this animation, and GSAP is much easier for controling  animations . Anyway I have a major Safari bug with SVG

so SVG is a dead-end.

Quote

None of the common fixes seemed to take away the error for me

Ok thank you for trying, that's at least not something obvious I missed. 

Will keep trying to get things ok and I'll post the result here.

Cheers !

[ZachSaucier]

7 minutes ago, Yumigo said:

I have a major Safari bug with SVG

so SVG is a dead-end.

Why not use position: sticky for that?

[Yumigo]

Thank you very much Zach,

as of my StackOverflow  issue.

 

I ended up improving most of the jittering using force3D:false and rotation:0.1 as other threads and yourself suggested.

 

cheers!