noahr

Wonderful, thank you so much!

Hey there, I've got a ScrollTrigger to animate some "floating" objects (parallax) with randomly generated positions, and if I click on one of the objects, it fades out, then receives a new random position and then fades in again. However, I am struggling to integrate all this together with the ScrollTrigger effects - As you can see in my demo, the objects jump around when spawning/scrolling, because the position is not calculated correctly anymore. I thought I might need to update or create a new ScrollTrigger each time I hand out a new position - how would I do something like that? Or is there a better, more elegant solution? Thanks a lot!

Just to update, here's what fixed everything for me: ScrollTrigger.normalizeScroll({ target: scroller, allowNestedScroll: true, type: "touch,scroll,pointer" }); I additionally excluded the normalizeScroll for wheel scroll actions with "type". Thanks for all the help again!

Sorry for the confusion - I'm unfortunately not super familiar with all the lingo. Attached a video that hopefully clears things up a bit. I'm using Chrome 108.0.5359.125 on Win10 (and a mouse wheel!). ScrollJumps.mp4

...one more thing that I just realized is that the solution unfortunately breaks the native smooth-scrolling behavior (only an issue for mouse wheel scrolling). Basically I get frame-jumps instead of seeing the vertical movement of the page. Here the demo again, if you comment out ScrollTrigger.normalizeScroll({ target: ".scroller", allowNestedScroll: true }), mousewheel scrolling will be smoother again. https://codepen.io/fltng/pen/ZEjWwNd Do you maybe have an idea how to bring that back while allowing nested scroll, too? Here's a topic I just found that seems to be super close to mine: Thanks a lot, I appreciate your effort!

Oh yes, that solved it, it's running infinitely smoother now. This was the very crucial line: ScrollTrigger.normalizeScroll({ target: ".scroller", allowNestedScroll: true }) I'll have to try it on the other devices soon, too, but it's looking super promising on Android. Thanks so much for your great help!

Happy new year! And thanks so much for the detailed replies. I tried ScrollTrigger.normalizeScroll({ allowNestedScroll: true }) as well as ScrollTrigger.update, however unfortunately both tests came out without any changes for the better. I could only test them using an Android (13) device with Chrome (108), but I get the same jittery behavior there, too. (To specify again: it basically jiggles up and down while I pull my finger up/down on the screen, instead of just staying pinned down still). One noteworthy thing I totally forgot to mention: Something that completely fixes this issue is when I use 'smooth-scrollbar'. Makes the pinning super smooth on all devices I used for testing, also mac/iOS. I don't really know why though and I would like to refrain from using any form of scroll jacking.

Hi there, I keep running into a small problem: In Chrome pinning with ScrollTrigger runs wonderfully, however, on Safari (both, iOS & macOS) an on Chrome/Android it keeps vertically jittering while its pinned. Excuse the weird layout in my codepen demo - I tried sticking to the original as well as I could and for me the preproduction worked like this. I suspect it might be some CSS issue since I reduced the JS to a bare minimum? Thanks a lot for your help!