FadeCarousel?ing based on scroll

[Rinku Samanta 2 Likes (Newbie)]

I have one section with class pinned and it has some list -items(the list-items are dynamic meaning there can be 4 or 6 list-item depending on response from api). Now the animation, I want to achieve is that on scroll, the section with class "pinned" should get pinned and each list-items will fadein and fadeout(if first leave then second enter), one by one according to the scroll progress. So at a time only one item will be visible at center of the section. We can kind of think it as fade carousel, where the fading in and fading out of each items is based on the scroll progress. Once all the list item have been animated the pinning will be removed.

This question may have been asked before but I couldn't find it so if someone can point me to the example that will fine too.

See the Pen GRjMeed by rinkusam12 (@rinkusam12) on CodePen

[ZachSaucier 7,048 Likes (Superhero)]

Hey Rinku. These forums are intended for specific questions. Do you have a specific question about GSAP that we can help you out with?

 

If you're looking for a general how to create scroll animations I recommend the ScrollTrigger documentation and @Carl's intro video course if you'd like more details.

[Rinku Samanta 2 Likes (Newbie)]

Hi ZachSaucier, Thank you for responding on this. Firstly the intro video link is giving 404 so I don't know about what content it has. Secondly I though I provided enough information about the animation I want to achieve. Basically, I would like to achieve the animation foretold above using scrolltrigger. I was half successful but could figure out how to transition one element after the other based on scroll progress. I don't have any live website example for it. Otherwise it would have been a bit simpler. 

[ZachSaucier 7,048 Likes (Superhero)]

Hmm. Maybe the link expired or maybe it requires signing up for his courses (great deal): https://www.creativecodingclub.com/bundles/creative-coding-club?ref=44f484

 

On 12/24/2020 at 4:26 PM, Rinku Samanta said:

figure out how to transition one element after the other based on scroll progress

It sounds like you want to create a timeline and then attach a ScrollTrigger to that timeline. Both the docs and the course that I linked to show how to do that sort of thing.