Jump to content
Search Community

Recalculate size Smooth Scroll with ScrollTrigger Natively

Bruno Stephen test
Moderator Tag

Recommended Posts

I'm using GSAP's native smooth scroll and it seems to be going well.

 

At the moment I need to recalculate the document size or do the smooth scroll setup again because in my project this area will be with article filter so to simulate instead of filtering I just remove the first element and then do the setup again.

 

It works relatively well but I think there's something wrong.

 

Note that after I apply the logic the PIN stops working with snapTo correctly.

 

I will need to redo this setup frequently throughout the project so I wanted to know the best way to perform this action!

 

I hope you can help me thank you in advance!

 

 

See the Pen rNmgXzO by whoisbrux (@whoisbrux) on CodePen

Link to comment
Share on other sites

Hi Blake first I have to admit that I'm your fan.

 

With his suggestion snapTo works perfectly but the content size is wrong.

 

From that I added a delay of 1.1 to wait for the content to reach the end of the scroll to compensate for the scrub 1, after that I put another delay of 1.2 by calling ScrollTrigger.refresh(); it got a little ugly but it worked.

 

See a better way to do this?

 

thank you Blake

 

See the Pen yLbdBqo by whoisbrux (@whoisbrux) on CodePen

Link to comment
Share on other sites

15 minutes ago, Whoisbrux™ said:

From that I added a delay of 1.1 to wait for the content to reach the end of the scroll to compensate for the scrub 1

 

Ah, nice catch on that. You could try refreshing the smooth scroller...

 

let smoothScroller = smoothScroll("#content");

...

onComplete: () => {
  smoothScroller.refresh();
  // gsap.delayedCall(1.1, () => {
  sliderItems[0].remove();
  TL.scrollTrigger.kill();
  TL.kill();
  pinSlider();
  // });
  // gsap.delayedCall(1.2, () => {
  ScrollTrigger.refresh();
  // });
}

 

But then it might jump. Maybe waiting for it to finish is better.

 

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.
×
×
  • Create New...