Simple infinite scrolling list

[axellerator]

Hey all!

I am pretty new to all of this. And I should mention that I am not a developer by any means! 😃 ... but I have come pretty far on my own.

I have a list of 18 items. I want to scroll this list vertically. and it should do this infintely – in both directions. I don't want to dynamically create items, nor do I want this to by dynamic. I just want the list/scroller to wrap forwards and backwards ... Everything I dug up in this community seems to be waaaaay too complex for what I am trying to achieve.

The thing I have created falls apart when you are scrolling past the trigger points with high velocity. On Safari it just locks on to the wrapping point. But on Chrome it starts to jitter as hell. I suspect this is due to my amateurish approach to solve this?

Please feel free to check out my DEMO – yes, there is some other stuff hapening on the page, but I am only having problems with the list.
It is webflow with GSAP I attached the script file for reference.

Any help or pointers would be highly appreciated!

 

gsap_infinite_scroll.js

[mvaneijgen]

Hi @axellerator welcome to the forum!

 

Check out the seamless loop helper function https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop, otherwise this reply from @GreenSock on the forum a few years back. 

 

 

Sadly we cant help you debug a live website, there is just no way to modify the code directly. I highly recommend starting your animation on a place like Codepen, so that you can just experiment with plain HTML, CSS and JS and don't have to  worry about your framework or platform trowing error. Next to that you can easily fork your work to create different versions and don't loose progress you also have an easy version you can share on places like this. 

 

We've create a boilerplate which loads all the plugins even the bonus ones! Hope it helps and happy tweening! 

 

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

[axellerator]

Hey! 😃

Thank you for your reply. I found the example as well ... but this seems way overkill for "just" trying to wrap forward/backward a scroll container with static content. 😃 it is really basic, at least in my mind ... ?

And my current solution is based off of the "simplified" example in this thread. But this causes the jitter-issues.

[axellerator]

After further examination, I found out that the CSS scroll snapping that I am using on each and every line is causing the jittering. The scrolling works just fine and wraps forwards and backwards.

This leads me to the question: How could I achieve this snapping with GSAP?

[Rodrigo]

Hi,

 

ScrollTrigger has a snap functionality that is super complete and comprehensive. Check the docs (be sure to click on View More details to see all the possibilities):

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#snap

 

Also you can check our demos:

https://gsap.com/demos/?page=1

 

Finally our ScrollTrigger How-To collection:

https://codepen.io/collection/AEbkkJ

 

Hopefully this helps.

Happy Tweening!

[Rodrigo]

Hi,

 

I remembered this demo that could help as well:

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

 

Happy Tweening!