Trying to create a menu / link list navigable via the mouse-wheel based on "Infinite Scrolling Cards with GSAP and ScrollTrigger" demo. Have some questions.

[jakie]

Hey there,

So as the title mentioned, I'm trying to create a menu / list of links, that would be navigable by scrolling the mouse.

Something to the likes of this projects menu https://www.contekst.be/projects

 

I'm playing around with this pen 

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

but have some questions as I don't fully get how everything works.

 

- First of all I noticed that changing the number of items in the list from the 'default' 30 - like in the original pen, kinda breaks the whole effect.

I managed to make it work with a list of 10 items by adjusting the 'end' value in the 'trigger'.

So the question I have for this - is this pen specifically made for certain number of items, or I'm just missing an option that I could adjust to make it work with any number of items in the list? Or for every added item I would need to redo some maths or timings?

 

If it would be hard to just add or remove items from the list on the fly, is it possible to convert this to non-infinite scrolling cards? So the scrolling just stops at the bottom of the page / on the last card but the cards still get highlighted in the middle.

 

- Another question I have is regarding the transition, how can I control it? For example so that the cards don't just gradually fade to white, but every non 'selected' card just turns white immediately? Not sure what creates these steps in the transitions.

 

- And lastly, how could I mark the card in the middle as 'active'. For example adding a class to it when it is 'highlighted'. I'm not sure how could I specifically refer to the 'highlighted' card in the middle, so that for example I can make a mouse-click open a link of that specific card.

 

Thanks in advance and sorry for such a loaded topic.

I'm trying to reverse engineer the original pen but I kinda get lost with the more advanced js / gsap stuff when it comes to the looping and such. 

 

 

See the Pen jOKrrvx by byanima (@byanima) on CodePen

[Rodrigo]

Hi @jakie and welcome to the GreenSock forums!

 

Unfortunately we don't have the time resources to tackle custom requirements lists from our users.

 

We will offer the best possible advice to get you started though. Right now you're trying to adapt something that serves a very unique and particular purpose for a fairly different scenario, you don't need an endless loop. In this cases is far better to just create the animation solution first and add ScrollTrigger to the mix later, as @Cassie explains in this video:

For time reasons I've been struggling a bit on generating something that could get you started. I came up with this which can help you get started:

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

 

Another option that I'm is using ScrollTrigger Batch to create an animation for each box with a different CSS and layout, but I ran out of time and I wanted to give you some sort of answer ASAP:
https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch()

 

Hopefully the previous example is enough to get you started and the docs on ScrollTrigger and the Batch method help you as well.

 

I'll try to get some example using Batch shortly so please stand by.

 

Happy Tweening!

[Rodrigo]

Well seems that ScrollTrigger Batch was a better solution:

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

 

Happy Tweening!

[jakie]

Hey @Rodrigo, of course I understand all that, thank you for your time and trying to go through my post hah.

Nevertheless you've been more than helpful, especially with the batch solution, this will definitely get me going.

 

Thanks again, hope you have a great day because you've made mine! <3