Scrub animation in a Pined Scroller - Mobile Jitters

[b1mind]

First off, I wanted my first post to be a big long sappy rant about how much I love GSAP and this community. When I first came back into web dev after a long hiatus (was a big Flash/AS fan) my dreams of a animated interactive web were restored because of you all, and had my eyes opened to a world I thought lost in this new era of webdesign. (PointC's post moved me, I then committed to start my own journey) So maybe I will write about it some time, but for now..... 

 

So I have a pinned object that is scrollable and then a pin a element inside it with a  scrub an animation. Runs great on desktop from what I can tell, but in Chrome mobile the scrub animation causes the pinned element to hop/jump on the srollable axis.

 

My issue is probably because I am doing something wrong, but I can't seem to figure it out. I tried to remake my issue super basic and was able to replicate in this codepen.

See the Pen rNxwogv by b1m1nd (@b1m1nd) on CodePen

[ZachSaucier]

2 hours ago, b1Mind said:

First off, I wanted my first post to be a big long sappy rant about how much I love GSAP and this community. When I first came back into web dev after a long hiatus (was a big Flash/AS fan) my dreams of a animated interactive web were restored because of you all, and had my eyes opened to a world I thought lost in this new era of webdesign. (PointC's post moved me, I then committed to start my own journey)

So glad to hear that! Thanks for sharing the bit that you just shared. And welcome to the GreenSock forums  

 

2 hours ago, b1Mind said:

Runs great on desktop from what I can tell, but in Chrome mobile the scrub animation causes the pinned element to hop/jump on the srollable axis.

It seems to work inconsistently for me even on desktop. Sometimes the secondary scrub animation works but sometimes it doesn't.

 

In general nested pinning is at the least tricky because it's very hard to calculate correctly. Why not use a single pin instead?

See the Pen zYrzXMj?editors=0010 by GreenSock (@GreenSock) on CodePen

[b1mind]

Quote

It seems to work inconsistently for me even on desktop. Sometimes the secondary scrub animation works but sometimes it doesn't.

I noticed that if you are just scrolling and are over the element it wont scroll you have to move your mouse to register your on the element then scroll, maybe this is the inconsistency you speak of? Seems like a default browser behavior, this also seems to effect mobile as I some how can get it to not bounce some times.

 

Quote

Why not use a single pin instead?

Why ask why? "bud dry!" (sorry I am super corny)

 

This is my first go at Scroll Trigger and I made a Codepen for the challenge this week. I originally had it as a single pin and it does work wonderfully! Though for some reason I felt the user needed to be able to choose to drink(scroll) or not...  thus here we are lol

 

See the Pen eYJWqey by b1m1nd (@b1m1nd) on CodePen

 

[ZachSaucier]

21 minutes ago, b1Mind said:

This is my first go at Scroll Trigger and I made a Codepen for the challenge this week. I originally had it as a single pin and it does work wonderfully!

I saw it! It's a good submission. Well done on your first go  

[GreenSock]

1 hour ago, ZachSaucier said:

In general nested pinning is at the least tricky because it's very hard to calculate correctly. Why not use a single pin instead?

Gosh, I never even thought of someone trying to do nested pinning. Ha. I certainly wouldn't recommend that. Seems fraught with logic challenges and browser quirkiness.

 

Welcome aboard, @b1Mind! I love the CodePen concept. Nice work. 

[b1mind]

Thank you both 😊😊 I had a lot of fun making it! Scroll Trigger is amazing, seriously you guys ...so easy, so many options!

 

11 minutes ago, GreenSock said:

Gosh, I never even thought of someone trying to do nested pinning. Ha. I certainly wouldn't recommend that. Seems fraught with logic challenges and browser quirkiness.

100% This was totally one those out the box cases, I honestly was so shocked when it worked so effortlessly... Cause I thought the same thing, way to many things could go wrong. 

 

Probably not a issue that even needs resolved then, I might try to do it some other hacky way another time lol.  

 

Appreciate you guys thanks for looking into it. This finally got me to come out of the shadows and stop lurking on the forums 👺!

[GreenSock]

3 minutes ago, b1Mind said:

Appreciate you guys thanks for looking into it. This finally got me to come out of the shadows and stop lurking on the forums 👺!

Alright, you're officially out of the shadows, so we expect you to dive in wholeheartedly now. We love when folks in the community help each other and chime in here. It's one of the best ways to learn too. 

 

Glad you're here. Enjoy your tweening/scrolling adventures. Very nice to hear that you were favorably impressed with ScrollTrigger. 🙌

[b1mind]

So I had a chance to revisit this and seems like the issue has noting to do with a child pin inside a parent pin. Its jumps and hops when giving a srollable prop to a pin period. If you comment out the first pin in my demo you can see this. Also looks like the locomotive pens have the same undesired effect in mobile.

Has the same effect on android and looks like ios mobile devices. 

 

I don't know enough about how it works under the hood. I do love to test though.... Seems like it has to do with the body scroll speed and then the element scroll speed. Cause if I scroll about the same speed on the body then the element it seems to not jump(or as much). If I make small jerky scrolls on the body, then scroll on the scrollable element hops really really bad. 

[GreenSock]

I just updated that other thread with this info...

 

It looks like LocomotiveScroll handles things completely differently on mobile devices - it doesn't do any kind of clipping and translating of the container element. Instead, it lets the mobile device's browser just do its normal scroll. That's a problem because most browsers handle the main window scrolling on a different thread, so it's literally IMPOSSIBLE to have it synchronized with JavaScript! When you swipe-scroll, the browser renders the screen on another thread and then at a totally different interval, it updates the JavaScript thread. That's why you saw jitters. 

 

It doesn't do that on nested elements that have their own scroll. It's just the main page scrolling that's the problem. 

 

The ONLY way to avoid this is to pin things using position: fixed, but keep in mind that if you set position: fixed on an element that has an ancestor with ANY transform (even translate(0, 0)), it won't work properly. It'll scroll with that element instead of remaining fixed in the viewport. Ah, the joys of scrolling technologies. 

 

I've updated the beta of ScrollTrigger so that you can set a pinType: "fixed" on the scrollerProxy(). But of course you'd only want to do that when the parent isn't getting transformed. With LocomotiveScroll, that means only on mobile. I added this conditional logic to sense it automatically in the demos above: 

// LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
pinType: document.querySelector(".smooth-scroll").style.transform ? "transform" : "fixed"

Seems to work nicely. 

 

So to be clear, this wasn't a bug or issue with ScrollTrigger - the jittering was caused by LocomotiveScroll handling things very differently on mobile AND the fact that the browser performs scrolling on the main page via a totally different thread. 

[ZachSaucier]

You can set smoothMobile: true in the Locomotive Scroll settings to get it to work on mobile.