how can I give opacity to the item behind

[Mukhriddin]

Hi guys. I need your help!

Thing I was expecting here is that when the second page is coming up, the first one's opacity needs to dicrease; and the third comes up, the second one's opacity reduces; and this progress goes on untill the last card (Done!).

And also if you take a look, this last card finishes items' sticky position. I mean when scroll reaches to the most end, the last cars brings the whole wrapper above. I wanted it stays as before ones. 

If you don't get me properly, let me know I will explain in details.

See the Pen bGLLOOY by Mukher (@Mukher) on CodePen

[Cassie]

Hey there!

 

You can access the previous panel in that loop like so.

Hope this helps give you a little nudge in the right direction. Good luck!
 

panels.forEach((panel, index) => {
 
 tl.to(panels[index - 1], {
  opacity: 0,
 })

})

 

[Mukhriddin]

44 minutes ago, Cassie said:

Hey there!

 

You can access the previous panel in that loop like so.

Hope this helps give you a little nudge in the right direction. Good luck!
 

panels.forEach((panel, index) => {
 
 tl.to(panels[index - 1], {
  opacity: 0,
 })

})

 

Thanks, Cassie!