Scrolltrigger jank while using element as scroller

[mfk]

Hello,

 

I've been using scrollTrigger for abit but today i was trying to pin something while scrollign within an element (not body) and im experiencing jankyness in the pinning of the trigger.

 

I did a video capture here: https://www.dropbox.com/s/88tlf0q3md8c4zm/scrolltrigger-jank.mp4?dl=0

Happened in chrome and particularly happens more on larger sized browsers.

 

Cant quite replicate the source for now but was wondering if anyone else experienced something similar

[Ihatetomatoes]

Hi @mfk, welcome to the forum. Really hard to say what is causing it without seeing any code. Can you create a simple CodePen demo?

 

This could be something to do with your markup and css.

 

Cheers

Petr

[ZachSaucier]

As Petr said, a demo can help us help you. Here's a thread that goes into detail about how to create a minimal demo:

 

[akapowl]

 

Hey @mfk

 

I was experiencing sort of the same when scrolling and pinning within in an element other than body

( though for me it only appeared on mobile)

 

Check the conversation in this thread and especially @GreenSock's last answer over there.

 

 

The pens in that thread do not exactly represent the same beahaviour, that you are experiencing, but in the real project of mine, I had exactly the same stuttering appear, and could fix it that way.

 

Maybe it will help in your case, too.

 

Cheers

Paul

 

[GreenSock]

By the way, in 3.5.0, we added the ability to set pinType: "fixed" on individual ScrollTriggers to get that effect more easily. The scrollerProxy() tweak works too, but may be less intuitive. 

[mfk]

thanks guys for the suggestions. ive since decided not to use pinning in this case but if i ever experience same issue, ill try those out!

[mfk]

just finally figured out the issue with this. just for the benefit for anyone else who might face this same issue, i'll just put this here.

 

the custom scroller im using is a fixed positioned element that overlays the body (like a scrollable modal)
and the reason for the jank was that when i scrolled on the modal, the body element is also being scrolled at the same time.

my solution was to apply overflow:hidden to the body when the popup was active and the issue was solved.