[Vertical item carousel with ScrollTrigger]

Thanks @mvaneijgen for the tips and the demo!
I will give it a try with a single timeline and try to build it without the ScrollTrigger first.

[Vertical item carousel with ScrollTrigger]

Hello,

 

I am fairly new to GSAP and I've been looking at the documentation and the different examples, but couldn't quite figure out how to put together the project I am working on.

 

I am building a vertical item carousel in which there is a left panel with a thumbnail and a right panel with the items and a letter index.
The thumbnail must stay in a pinned position and as the user is scrolling, an item gets activated and the corresponding image shows up.

 

I have multiple struggles mainly with the scrolling:

• I'd like the items to push each other out as I am scrolling: I tried achieving this with setting a negative yPercentage (basically at one point it would go over the header depending on the number of items)
• As I scroll past an item, I'd like to transition it back to the starting state: this works when I don't have scrubbing enabled.
  Also there are states where none of the items are selected, should I use the `snap` property to make sure there is a selected item?
• The thumbnail should change to the active item's thumbnail: should I do this via another timeline or the onEnter/onEnterBack/onLeaveBack events?
• How should I approach making it work with mouse clicks too (clicking an artist name should scroll to that artist as it does with scrolling)?
• Finally, on the right hand side there is a letter index where the appropriate letter should be highlighted: but I did not even attempt this, because I wanted to get the item scrolling working first.

 

I have also experimented with the Observer plugin, which seemed to work better for pinning the container, but I felt like ScrollTrigger is the better way to go forward.

 

Attached a video of the Figma prototype this demo is based on: http://advo.hu/animation.mov
CodePen: 

 

Any help and advice is greatly appreciated!

See the Pen VwdPgYj by szlegradi (@szlegradi) on CodePen