Animations lagging on iPhone

[KWcksn]

Hello!

 

I am very, very, very new to GSAP and currently creating my first project with GSAP. However, I am facing a difficulty in animations with iPhone. See, the animation works great on desktop and Android, but on iPhone it somehow... lagging/stuttering.  I am also using 

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

from GreenSock (thank you so much!) with little tweaking. 

I have also tried using z-index and scaleY but it only makes the animation worse. 

I am so confused and out of ideas... any idea how to improve the performance on iPhone?
Thank you!

See the Pen QWRMPJM by Keywcksn (@Keywcksn) on CodePen

[Cassie]

Hey there!  So, you're animating a filter here which unfortunately is a big old performance drain. Probably THE worst thing to animate on the web.

I've had success animating filters on very small elements over very short amounts of time, but here you're animating elements that take up the whole viewport, for the entire duration of the scroll.  The larger the area of change, and the longer the animation time, the more the browser's going struggle. 

 

Things that are reliably performant are opacity and transforms. Anything else is a bit of a 'test it out and see' kinda deal. Sorry to be the bearer of bad news, but luckily, if you remove the filter, your card animation will work much better!

[KWcksn]

Hi Cassie! Thank you so much for replying. I tried to remove the filter, and as you said, it works better! Kinda sad to remove the blur filter, but eh, as long as it works. Again, thank you!!