Jump to content
Search Community

Vertical item carousel with ScrollTrigger

szlegradi test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

Hi @szlegradi welcome to the forum!

 

I think your issue right now is that you have to many ScrollTriggers, each item has its own, and ScrollTriggers don't necessarily talk to each other. I would go about this crating one timeline with one ScrollTrigger on which each item gets animated. This way you can also first build out the animation you want and worry about ScrollTrigger later, Because the best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. 

 

You can add labels to your timeline to have specific points to navigate to and indeed using them as `snap` points are great. 

 

I would start with:

  1. Creating the animation
  2. Add ScrollTrigger 
  3. Add snap points 
  4. Worry about highlighting anchor points 

These are four distinct parts you want to get working, but it's hard to explain the next point if the first point isn't done. 

 

Something like this is what I would start with, personally I like to animate .from() some position to to the position they already are in the layout and then I think you also want them to animate away again, so that needs to be part of the timeline.

 

See the Pen NWzpGvK?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

If you want things to animate in and out at the same time I really recommend our own @Carl video 

 

This already is a lot and I don't want to overwhelm you, so just start with these tips and post back here when you're stuck then surely someone will point you in the right direction agin. 

 

Hope it helps and happy tweening! 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...