Jump to content
GreenSock

mfk

Scrolltrigger jank while using element as scroller

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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:

 

Link to comment
Share on other sites

 

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

 

  • Like 3
Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

  • 3 weeks later...

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.

 

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×