ScrollTrigger Carousel Opacity Help

[Cdubuu]

I currently have a carousel(attached codepen). I would like the items to fade in from opacity 0 to 1, center viewport being where I would like the opacity of 1. Then once it moves past the center it then fades back out. When I add opacity to the fromTo it applies the same value to all of the links. I suspect that there is some equation that could be used, much like the rotationX, but I am just not good with equations/math. I am also aware that the whole thing might need to be redone to accommodate. Any help would be greatly appreciated.

See the Pen zYyPzEL by cdubu (@cdubu) on CodePen

[GreenSock]

You meant something like this?: 

See the Pen gOZXeEM?editors=0110 by GreenSock (@GreenSock) on CodePen

 

Or an alternative that doesn't move on the y axis: 

See the Pen WNLXzYO?editors=0110 by GreenSock (@GreenSock) on CodePen

[Cdubuu]

Thank you for responding so quickly!

 

I do like what you did with the first solution in the sense that I kind of get an idea of what I need to do. However there is a portion of example that I think got lost because of how it is presented(my fault). In the my example the links are displayed in a way that it looks like it is on a wheel when scrolling. I achieved it by looping through each link and rotating them on the x-axis. I would like to incorporate the opacity solution you presented, but I am having trouble figuring out how I would do so. It looks like the opacity solution you made takes the array and then uses the keyframes property to achieve the opacity effect, but in my example I am looping through the array and the keyframes property doesn't work since I am working with the individual link when setting properties.

 

I can't really think of a good way to maintain the positioning without looping through them. Sorry I am not trying to make you do this for me, I am just kind of new with gsap and I also failed math in school. I am envisioning the end result would maintain the wheel look and as the links rotate they also go opaque. 

 

New pen: 

[GreenSock]

Here's a tweaked version that might get you going more in the direction you hoped: 

See the Pen MWZOXNJ?editors=0110 by GreenSock (@GreenSock) on CodePen

[Cdubuu]

Awesome! I appreciate all the help, you have been great. I am more than confident I have everything I need now. Thank you