Sundararajan KS

Hello, I want a carousel exactly like this "https://codepen.io/GreenSock/pen/LYRwgPo", but with just 3 items instead of 30. When I change the number of items to less than 10, the carousel breaks. Please help, I am not that good at JS.

Hi @akapowl, thanks, this works perfectly.

Hello, I am trying to change the color of the title from Black to White (& fade the intro text) when the title starts entering the blue region and stays there until the user scrolls back up. But for some reason, the color change happens either earlier or late but never on the border. I tried to get the height of the intro text and then set the start/end value, start position of the blue region etc, but nothing is working. Can anyone please help and let me know what I am doing wrong. I can't hardcode pixels as the introduction text below the title can be one line or 10 lines. Design like this:

I already tried pinSpacing with various options, does not seem to work

Hi @Cassie, thanks for the script, but the only problem I am not able to resolve here is the extra space between the last drawer and the dummy content paragraph. Is there a possibility to reduce/reset the height after all the timeline is completed?

I am using Thomas's script because the number of accordions are dynamic in my case and there can by any text/image before and after the accordion. I tried to add height/margin-top as you suggested after the last item, but it does not seem to make any difference https://codepen.io/sundararajanks/pen/gOWVvzy

Hi @akapowl, @Thomas Günther - is it possible to keep the accordions open by default when scrolling down and closed by default when scrolling up? I tried to remove/set the height (100vh) in the css, but it is giving a huge space at the bottom

Thank you @akapowl and @Thomas Günther, you guys made my day

Hello, I am brand new to GSAP (started yesterday) and I am trying to create an animation/scroll trigger like on this website https://www.bertani.net/style/ from the section "Bertani styles" in my current project. The closest I could find is this - https://codepen.io/sundararajanks/pen/gOWVvzy , but this is not same as on the above reference site. Here, the heading is pinned on scrolled and on further scroll the image is also pinned and the next heading scrolls up as a layer and the image is pinned again and on scroll the next heading with image shows up as a layer and so on. Can anyone help me here please?