Layered Pinning Bug

[RubberFruit]

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,
         start: 'top top',
         pin: i !== panels.length - 1,
         pinSpacing: false
     });
 });

 gsap.set('.scroll-item', {zIndex: (i, target, targets) => targets.length - i});

 

 

[OSUblake]

Welcome to the forums @RubberFruit

 

It's very hard to answer ScrollTrigger related questions without a minimal demo as there are a bunch of other factors involved, like your CSS and HTML. Thanks!

 

[RubberFruit]

12 hours ago, OSUblake said:

Welcome to the forums @RubberFruit

 

It's very hard to answer ScrollTrigger related questions without a minimal demo as there are a bunch of other factors involved, like your CSS and HTML. Thanks!

 

Hi @OSUblake!
But I also use which is used in my project and is difficult to implement in the code pen (in the gsap settings I use scroller: isMobile () || isTablet ()? '': '.scroller',)

See the Pen eYGEgvL by rubberfruits (@rubberfruits) on CodePen

[OSUblake]

What do you use a different scroller for? If you're trying to prevent the address bar from moving, this pen might help.

 

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

 

URL to test on mobile...

Pair with CSS Scroll Snapping - ScrollTrigger Live Preview (codepen.io)

 

[RubberFruit]

17 hours ago, OSUblake said:

What do you use a different scroller for? If you're trying to prevent the address bar from moving, this pen might help.

 

 

 

 

URL to test on mobile...

Pair with CSS Scroll Snapping - ScrollTrigger Live Preview (codepen.io)

 

 

I use it for a different look and feel and the whole project is already built on using it That is, you suggest that the card should not be fixed at the top of the screen, but gsap itself scrolled it to the top?

[GreenSock]

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 (slower) device, and the page is more complex so the browser requires more resources to render.

The only solutions are: 

1. Use the anticipatePin feature which basically watches the velocity of the scroll and attempts to apply the pinning just BEFORE it would be necessary. That doesn't actually "fix" the issue as much as attempts to hide it a bit. 
2. Use a smooth scrolling library (or our helper function) so that all scrolling is handled on the JS thread. That way, there's never a synchronization problem.