GSAP Pinned Images

[Matthew Meaklim]

Morning,

 

I've created a simple scrolling gallery on a website, and it works well everywhere except mobile. I thought it was perhaps some sort of conflict with another lib in use on the dev site, however the issue persists in CodePen. When on mobile, iPhone to be precise, when I initially scroll through the gallery, everything is grand. However, if I scroll back and go to scroll through the gallery again, the final image seems to duplicate itself and shows twice (with the duplicated image overlapping and causing a bit of a mess). I've attached a screenshot of what I mean.

 

Any advice appreciated.

 

Thanks,

 

Matthew

See the Pen dyLVxvv by ilimitadostudio (@ilimitadostudio) on CodePen

[mvaneijgen]

I can't get this to happen on iOS (17.3.1) Safari either in the Codepen view or the debug view of Codepen (without an iframe) any particular device/version you see this happening?

 

Side note you can also use .from() instead of .to() tweens that way you don't have to set custom CSS for your second and third image and just let GSAP handle all the setup. I've also written a guide how you can create these kinds of card stacking effects and the logic behind it. You already got the logic down, but maybe it helps you when you want to start making loops or use staggers 

 

 

This demo from the post looks like your setup. Hope it helps and happy tweening! 

See the Pen MWxgQbV by mvaneijgen (@mvaneijgen) on CodePen

[Rodrigo]

Hi,

 

I tested on an iOS 17 iPad (Chrome - Safari) and on a couple of android devices (Chrome - Firefox) and can't replicate the issue 🤷‍♂️

 

Sorry I can't be of more help.

Happy Tweening!

[GreenSock]

I cannot replicate it anywhere either. That sounds more like a browser rendering issue than a GSAP issue anyway 🤷‍♂️

[Matthew Meaklim]

Morning,

 

Thanks all for the quick responses.

 

I should have said, the issue happens on an ancient iPhone 7, iOS 15.8.1 (Safari and Chrome was all I tested) — and like you all say, doesn't happen on more recent devices/browsers.

 

If I had to guess, I'd say it has something to do with that bottom bar hiding and showing, as on first scroll it works fine.

 

Thanks,

 

Matthew

[GreenSock]

If it's actually DUPLICATING the graphics, that's a browser rendering bug. 

 

I doubt it'll help at all, but you could try: 

ScrollTrigger.config({ignoreMobileResize: true});
ScrollTrigger.normalizeScroll(true);

(one or both of those)

 

And of course make sure you're using the latest version of the GSAP files (your CodePen looks fine). 

[Matthew Meaklim]

Thanks guys, based on your answers I've come up with a solution.😁