Pin problem.

[olr]

Hi, I have a problem with pinning mainly on mobile. It's similar on desktop, but I somehow managed it, but on mobile, by scrolling on the phone, my "end" moves even though the element is already on the "pin". The faster I scroll with my finger, the more my "end" goes up, as if it doesn't hold its position.
This will be perfectly illustrated in the video below

https://streamable.com/5tzbzq

my simple piece of code, although I have already tried many solutions. With lenis, without lenis, etc....
 

 

 scrollTrigger: {
            trigger: ".p-single-gallery",
            start: "top top",
            end: "bottom 50%",
            pin: true,
            scrub: false,
            markers: true,            
 }

 

[Rodrigo]

Hi,

 

That is just how momentum scrolling works on devices, Mac's magic mouse and laptop's trackpad, there is nothing wrong neither with the code you're posting or the video you're linking here, as far as I can see at least.

 

What you could try is to check for smaller screens and based on that set an end point that takes longer to scroll to, you can use GSAP MatchMedia for that:

https://gsap.com/docs/v3/GSAP/gsap.matchMedia()

 

Beyond that IDK if there is much that can be done to prevent that.

 

Happy Tweening!

[olr]

Thank you for your answer.

I found another example, maybe it solves this problem or at least I have this illusion when testing it, I just don't know if it will work in my vertical pin, maybe I will be able to implement it and check it.

See the Pen QWzwmjJ by snorkltv (@snorkltv) on CodePen.

[olr]

But on the other hand, it means that I can't stop pinning on the mobile version because I can scroll down the page too quickly? actually, this also applies to the desktop, if I scroll too quickly, the "end" continues... You wrote that my code is ok and that it works on iOS etc., but on Android the exact same thing happens. So there is no way to solve this?

[olr]

https://streamable.com/qu95jz

[Rodrigo]

8 hours ago, olr said:

But on the other hand, it means that I can't stop pinning on the mobile version because I can scroll down the page too quickly? actually, this also applies to the desktop, if I scroll too quickly, the "end" continues... You wrote that my code is ok and that it works on iOS etc., but on Android the exact same thing happens. So there is no way to solve this?

What you're describing is just the normal scroll behaviour any browser has on any device (desktop, laptop, tablet, phone, etc.). If you scroll quickly you'll reach the end of the document quickly as well, that means that any event and/or animation controlled by the scroll position will be fired and maybe go unnoticed.

 

The demo by @Carl you're linking uses the Observer Plugin to achieve that:

https://gsap.com/docs/v3/Plugins/Observer/

 

Here is another demo of the Observer Plugin that works in a similar way:

See the Pen ExEOeJQ by GreenSock (@GreenSock) on CodePen.

 

In devices you could try using ScrollTrigger's normalizeScroll method to keep the scroll and JS in the same thread:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

 

Hopefully this helps.

Happy Tweening!

[olr]

ok, thank you, I'll try