Vertical scroll inside container

[RainyMonday]

Hello

A few days ago I started playing with GSAP. I would like to make a simple vertical list of items inside container. I found a very similar solution to what I need  (codepen).

The only difference is that I want all elements to be visible one below the other and not overlapping like on codepen. I tried editing the CSS but I don't think it's enough.

 

I'm attaching a preview showing a static list that I want to animate. On the right hand side is the list that I want to animate. I simply want the list items to go up as you scroll down.

 

Thanks in advance for any tips.

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

[OSUblake]

Welcome to the forums @RainyMonday

 

I find it much easier to reason about ScrollTrigger animations if you don't include ScrollTrigger. Yes, just remove ScrollTrigger from the equation and figure out the animation first. 

 

Pretty easy, right?

 

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

 

Now just add a ScrollTrigger to it and you should be good 😉