Jump to content
GreenSock

lucasvallenet

ScrollSmoother with ScrollTrigger and infinite scroll

Recommended Posts

Hello,

 

Thank you for your great work and the release of the 3.10 with the new ScrollSmoother.

 

I'm trying it out on a new projet and I'd like to achieve an infinite scroll that contains scrollTriggers.

I made a simple demo trying to make an infinite scroll. It kind of works on scroll down (i couldn't make it work on scroll up) but I have couple of problems :

  • I can only access the progress within the self element, is there a way to get the Y position so that I can precisely scroll to the repeated section ? I am currently comparing the progress for sections of the same size, but I'm going to have different section sizes and pinning an element will also create issues
  • I think the best way would be to compare the scroll position in pixel with the windowHeight to easily detect when we are at the top/bottom of the page
  • Can I disable the smooth scroll end when arriving to the bottom of the page so it feels flowless ?
  • Are the scrollTriggers going to work seemlessly ?

 

Thank you in advance !

 

Lucas

See the Pen rNJeqKz by lucasvallenet (@lucasvallenet) on CodePen

Link to comment
Share on other sites

Welcome to the forums @lucasvallenet

 

Here's an example of infinite scrolling, but it's probably not going to work with SmoothScroller due to how the scrolling is animated, so when it goes from bottom to the top, it's going to animate instead of jumping.

 

See the Pen XWeJXVz by GreenSock (@GreenSock) on CodePen

 

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