Layered Pinning Bug
Hi guys
Please help me! played on the iPhone: when the scrolling reaches the top of the picture, it jumps to the top of the screen, and so on with each picture. What could it be?
video:https://vimeo.com/658538950
code: gsap.registerPlugin(ScrollTrigger);
let panels = gsap.utils.toArray('.scroll-item');
panels.forEach((panel, i) => {
ScrollTrigger.create({
scroller: isMobile() || isTablet() ? '' : '.scroller',
trigger: panel,
I don't see the problem at all on my iOS device, but I watched your video and I'm pretty sure I know exactly what causes that...
It's due to the fact that scrolling is handled on a different thread, thus iOS is rendering it PAST where it gets pinned for a brief moment before it executes the main JS thread and ScrollTrigger pins it. That's not a bug in ScrollTrigger - it's a logical consequence of how the browser updates things.
My guess is that your video was recorded on an older
