Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Rukasu

Jumpy scrollTo when used with scrollTrigger pinned element

Go to solution Solved by akapowl,

Recommended Posts

Hello guys,

 

I can't quite figure out what's wrong with my tween, and was wondering if anyone here could help me out.

The scroll animation is working as indented, but the problem is with the buttons.

I'm seeing a small jump after clicking on it, most noticeable by a white flash at the bottom.

 

demo.gif.0fee43cd0c7b956cdfe5847b2bc65d29.gif

 

Thanks in advance,

Lucas

 

See the Pen LYWKqEp by sueharaluke (@sueharaluke) on CodePen

Link to comment
Share on other sites

  • Solution

 

Hey @Rukasu

 

Quote

Most modern browsers handle scrolling on a totally separate thread (at least scrolling of the main documentElement), so it's not synchronized with the JS thread. When you get to the spot where it's supposed to do pinning, the browser renders things as if it continued scrolling, and THEN it runs the JS thread ad ScrollTrigger says "no, pin that element and set it as position: fixed", and that's where you see the "jump". 

@GreenSock

 

 

That explanation is taken from this thread, where you'll also find suggestions on how to workaround that. Hope that helps.

 

 

 

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

Hello @akapowl

 

Apologies for the extremelly late reply, had to put this project on the back burner, but was finally able to fix it. 

 

I ended up using a variation of Jacks approach.

Quote

You could simply ensure that your initial snapping position is actually SLIGHTLY past where the pinning occurs so that you avoid that whole "going from unpinned to pinned" tricky spot when you need to scroll elsewhere.

But instead of tweaking the snapping, I added a cheeky 10px on the scrollTo position, which madee the jump disappear.

 

Here's the fixed pen, for anyone who might have this problem in the future.

See the Pen poPJypw by sueharaluke (@sueharaluke) on CodePen

 

Thanks for the help !

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

×