Jump to content
Search Community

FadeCarousel?ing based on scroll

Rinku Samanta test
Moderator Tag

Go to solution Solved by ZachSaucier,

Recommended Posts

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

Link to comment
Share on other sites

  • Rinku Samanta changed the title to FadeCarousel?ing based on scroll

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. 

Link to comment
Share on other sites

  • Solution

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.

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