Scrolltrigger animation stutters on ios

[eliaselias]

Hi there, 

 

I've made this simple scrollTrigger (with scrub) animation. It's working as intended.

However, I've noticed that on iOs devices (namely my up to date iPhone 13 pro and my colleague iPhones)  the animation is choppy. 

By creating the codePen (eliminating non essential elements from the real life project) I've also noticed that it seems to get choppier as we go further into the animation (ie on the last slides). This does not happen at all on a desktop computer. 

 

I would love some pointers.. I've tried adding the normalizeScroll() as mentioned in this thread but sadly it didn't work.

I've also tried to disable lenis, it doesn't change this behaviour. 

 

Thanks in advance ! 

 

See the Pen qBvxZGb by Elias-Carella (@Elias-Carella) on CodePen

[mvaneijgen]

Hi @eliaselias  welcome to the forum!

 

Yep animating filter can be quite taxing on the browser, certainly when you don't have the full power of a desktop behind it. You could try adding the CSS will-change: filter; to the elements which gets the filter. Or you could look in to our gsap.matchMedia()/ https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/ and change the animation to not include filter on different device sizes. Hope it helps and happy tweening! 

[eliaselias]

Thank you for your help. I fixed it by animating out the filter of elements that were not visible anymore. Yay for ressources optimisations !