Jump to content
Search Community

ScrollTrigger Carousel Opacity Help

Cdubuu test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

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: 

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...