ScrollTrigger automatically jumps when pinned section not in view (on mobile)

[amit95]

I have what looks to be a rare bug with my pinned section. When viewing a page which contains this pinned section, on mobile, it will automatically start jumping up and down.

 

Here are visual of my issue:

• Video (notice the automatic jump 13s in)

 

In the above visual, it is automatically jumping up and down (I'm not scrolling near the end).

 

In my demo, I've stripped back all of my JS to test what may be causing this. However, the issue persisted. It only works if I comment out pin: ".horizontalScroller", which I cannot, as it's pivotal.

 

It works fine on desktop, no jumping, but when viewing on a mobile device, it starts to jump. I can only assume calculations with .pin-spacer are messing up, because once I'm passed that section,  it almost jumps up to pin again., then realises it shouldn't do that so goes back down, when the element isn't even in view. 

 

See sandbox here (again, the effect I'm having is on mobile)

 

Any ideas?

 

[OSUblake]

Hey amit, 

 

I'm not able to reproduce the jumping you are talking about. Does the jumping happen if you remove all your animations? Pinning on mobile can be tricky due to the reasons mentioned here.

 

 

Also, is there any reason you are doing the animations manually instead of using something like the containerAnimations?

 

 

 

[amit95]

Hi @OSUblake

 

Yes that's correct. Even when I remove everything and have just the below, it still jumps (and that's testing after clearing cache).

 

let container = document.querySelector(".horizontalScroller__items");

gsap.to(container, {
  ease: "none",
  scrollTrigger: {
    trigger: ".horizontalScroller",
    pin: ".horizontalScroller",
    anticipatePin: 1,
    scrub: 0.2,
    invalidateOnRefresh: true,
    refreshPriority: 1,
    end: '+=450%',
  }
});

 

In regards to containerAnimation, I actually tried this approach a few weeks back, but couldn't get it to work. I then reached out for guidance on Stack Overflow and there they told me that "Pinning and snapping won't work on ScrollTriggers with a containerAnimation" (

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

)

[OSUblake]

8 hours ago, amit95 said:

I actually tried this approach a few weeks back, but couldn't get it to work. I then reached out for guidance on Stack Overflow and there they told me that "Pinning and snapping won't work on ScrollTriggers with a containerAnimation"

 

It will work on main ScrollTrigger, just not for the child containerAnimations as that wouldn't make much sense...

 

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

 

As for the jumping, I'm still not seeing anything on Android or iOS. What device are you seeing issues on?

 

[amit95]

@OSUblake - I've seen the issue happen on iPhone 6/7/8 (Safari) and also on Android (Chrome) on my OnePlus 5T.

 

If you open this page on mobile and scroll past the horizontal scroller and then stop scrolling, you will see the jump.

[OSUblake]

Just to make sure I understand this jump you're talking about. I scrolled past the purple section on mobile and then it scrolls back up. Is that what you are referring to?

 

The only thing thing that I can think of right now is to try removing the anticipatePin property and maybe the refreshPriority.

 

[amit95]

@OSUblake - You're correct, that's what I'm referring to.

 

I've removed anticipatePin and refreshPriority before and have done so again. After clearing cache, this issue still remains, still jumps.

 

Note: I've added both properties back in so that it doesn't effect desktop.

[OSUblake]

I think that is just the address bar moving in and out of view on mobile, which triggers a resize, and you having smooth scroll behavior in the CSS.

 

:root {
    scroll-behavior: smooth;
}

 

[amit95]

@OSUblake 

 

Are you saying the CSS is part of the issue (if so, are you saying to remove it)? And is there a way to prevent resize on mobile? And do you see any issues with doing so?

[OSUblake]

1 hour ago, amit95 said:

Are you saying the CSS is part of the issue (if so, are you saying to remove it)?

 

Yes, the smooth scroll behavior can mess with it. As for the preventing resize, you would have to use a fixed scroller. The only downside is the address bar will always be visible.

 

https://greensock.com/docs/v3/HelperFunctions#scrollResize