Jump to content
GreenSock

RubberFruit

Layered Pinning Bug

Recommended Posts

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});

 
 
Link to comment
Share on other sites

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!

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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. 
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×