[ScrollTrigger-Tween and Click-Event-Tween interfere with each other (jumps)]

Wonderful, thank you so much!

[ScrollTrigger-Tween and Click-Event-Tween interfere with each other (jumps)]

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!

See the Pen GRBNWbL by fltng (@fltng) on CodePen

[ScrollTrigger : Pinning causes jitter when using touch (& on Safari)]

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!

[ScrollTrigger : Pinning causes jitter when using touch (& on Safari)]

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!).

[ScrollTrigger : Pinning causes jitter when using touch (& on Safari)]

...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.

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!

[ScrollTrigger : Pinning causes jitter when using touch (& on Safari)]

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!

[ScrollTrigger : Pinning causes jitter when using touch (& on Safari)]

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. 

[ScrollTrigger : Pinning causes jitter when using touch (& on Safari)]

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!

See the Pen ZEjWwNd by fltng (@fltng) on CodePen