Implementing GSAP Infinite Y Axis Scroll helper with Dynamically Updated List Content

[Tulip781]

Hello GSAP Community,

 

I'm currently working on a project where I need to create an infinite scrolling dynamic list using GSAP's Y axis seamless loop helper. I've attached a CodePen example to illustrate my current progress.

 

My goal is to design an infinite scrolling list that dynamically clones itself to fill the entire screen and can be filtered. Additionally, I want the center item in the list to have unique styling. While I've found some great resources and made some progress, there are a few specific challenges I'm facing:

 

• How can I effectively clone the list to fill the screen while ensuring it works well with GSAP's Y Axis scroll?
• What's the best method to update the seamless scroller when the list content changes?
• How can I consistently select and style the center element in a dynamically cloned list?

 

The list should clone itself as needed to appear fully on the page, with the center item distinctly styled, and can render correctly when the content changes.

 

Here is a code: https://codepen.io/indymoguler/pen/QWYVymp . The yellow column contains a static example of the list. The pink column is what I wish to update.

 

Any advice or pointers to relevant resources would be immensely helpful. 

 

Thank you in advance for your help.

See the Pen QWYVymp by indymoguler (@indymoguler) on CodePen

[ryan_labar]

6 hours ago, Tulip781 said:

dynamically clones itself to fill the entire screen

This definitely makes things quite a bit trickier, as, if you're using the modifiers plugin, like the demo is using, you'll have an un-even amount of elements.

Another approach for this would be to measure the screen-height, and compare that to the height of the the entire text block, then use JS to clone that text block X amount of times so that one of the blocks is fully, vertically off the screen (you'll need to do this math/cloning every time you filter, unless you want gaps in the text). Then you'd just need to vertically animate each of the text blocks (the original and cloned) yPercent: -100, ease: 'none' repeat: -1. For the special styling of the center item, I've not fully thought this through, but you'll likely need to watch each text element's offset in comparison to the window, and animate them based on that. I unfortunately don't have the time ATM to setup a demo for you, but hopefully this gets you pointed in the right direction.

[Tulip781]

Hi Ryan,

 

Thank you for your guidance; it's been really helpful and has sparked an idea for my project.

 

I'm currently facing a challenge with maintaining consistent scrolling speeds in a dynamically changing list. To provide some context, I have developed a function that clones text blocks vertically to fill the screen. Each time the list is filtered, I destroy and recreate the vertical loop to adjust for the new content.

 

The text blocks are within a parent DIV, which I initially tried to animate using the scroll loop function. I've realized that for seamless scrolling, I need at least two instances of my list, so I've cloned this full-height DIV twice. This setup now works as intended. However, an issue arises when I filter the list: the overall height of the list changes to fit the different text blocks off-screen, which inadvertently alters the scrolling speed.

Is there a way I can modify the function to normalize the scrolling speeds in relation to the varying heights of the elements?

 

Once I resolve this, my next step is to implement intersection observers and manage them through the onChange callback in the timeline.

 

Any assistance you can provide on this matter would be greatly appreciated. Thank you for your help.

[ryan_labar]

2 hours ago, Tulip781 said:

I'm currently facing a challenge with maintaining consistent scrolling speeds in a dynamically changing list.

For this, you'll want to set a baseline pixels per second, then divide that, depending on the height of the text blocks vs your baseline px/s value.
 

Let's say you want a baseline of 100px/s and the height of your text block is 560px, your tween object would look something like this:

 

const speedBase = 100; // pixels per secons

gsap.to('.text-block', {
  yPercent: -100,
  duration: (i, el) => gsap.getProperty(el, 'height') / speedBase, // element's height / speed
}

 

[Tulip781]

Thanks Ryan,

 

My current setup still makes use of then Vertical Scroll helper function. Are you suggesting i might not need that at all? I still want the functionality this enables, being able to scroll up and down it, as in the examples here (

 

Thanks for clarifying.  I will take a look at implementing your suggesting now.

 

I'm so grateful for your guidance.

 

Best,