Images are Flickering while animating them using scale property

[shivammak]

All images are flickering while animating them with scale property of gsap

Here's the working Stackblitz URL => https://stackblitz.com/edit/react-ts-hzgsvj?file=App.tsx

This is happening on every Chromium browser (Chrome, Edge, Brave) 

Working fine on Safari though?

[GreenSock]

Hm, I don't see any flicker at all in Chrome. 

 

I did notice that you're using React but you're not doing proper cleanup which is a bit dangerous in React because in React 18 and above, it DOUBLE-invokes useEffect()/useLayoutEffect() in strict mode so you might be inadvertently creating duplicate/conflicting animations/ScrollTriggers. I'd strongly recommend reading this article: 

 

gsap.context() is your new best friend in React. 

 

You can also try setting will-change: transform on the things your scaling because sometimes browsers do funky stuff rendering-wise (totally unrelated to GSAP) and perhaps that's causing the flickers on your device.