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: https://codepen.io/szlegradi/pen/VwdPgYj
Any help and advice is greatly appreciated!
