flowgrow

Nevermind, I found a way ? using position: sticky and a wrapper div ? so far, i had some small bumps along the way, but I really enjoy using GSAP. keep up the great work!

Hi Zach, thanks for your help, I ended up thinking of my own way of achieving what I want, you can see the end result in the updated codepen at the top. The only problem I have right now, is that I would want the animation to start at "top bottom" or "top center" but, when I do that in combination with "pin: true" the outer block also gets pinned at either "bottom" or "center". Is there any way, I can pin the block at a different position than the start of the timeline?

That looks quite similar. Thank you!

Hi Zach, thanks for your reply! Right now, all sorts of things aren't working the way I would want them to. ? I uploaded a video of what I could do in Figma prototypes, but with clicks, rather than scrolling: Ideal Animation video Currently, I am animating the whole ".point" divs but ideally I would like to have the images on the right always stay in the center of the screen, and only change via cross-fade. And only the text should be moving up. Also I am using "position:sticky" instead of "pin:true" because pin:true pins it to the center of the window instead of the top. I'll be reading through the common mistakes link, to see where I can improve ?

Hey guys, this is my first time working with GSAP and ScrollTriggers. Up until now, I usually hacked together my own scroll handler and was never quite happy with the result. I'm having some troubles getting the exact effect I want to happen. What I would want to happen ideally is the following. When first scrolling to the section with the text and image, I would like for them both to fade in from {opacity 0, translateY: 100px}. For the following ".point" divs, I would want the image on the right to be replaced with the next image with a cross fade, and the text should also cross fade but also with some vertical motion (e.g. new text from {translateY:100px} old text going to {translateY: -100px}. The indicators on the left should ideally also change to active, as soon as we reach the section. From what I have seen in previous discussions, this community seems to be quick to help, Thank you in advance!