Maartjevk

Ah, I will explore both ways to see which one will work for us. Thanks Cassie

Hi! I'm creating a hero for my companies website. We would like to have a animation with text change and mask reveal (couldnt get mask reveal to work in CodePen, so you can ignore that part). So far so good, all works well but we also would like to snap to the end if a user passes the 20% progress of scrolltrigger. It would also be nice if it works from bottom to top. I read the docs and saw the onUpdate() and the progress function. I cannot seem to understand how it supposed to work. I tried some things but I'm stuck. So I need a scroll triggered event to start playing and after the user passes 20% the whole animation is snapped to the end. (like its self scrolling) How can I fix this?

Ah top, dankjewel @mvaneijgen! This is exactly what I needed. So if I understand correctly it is better to just animate one div instead of multiple with an querySelectorAll? I modified my Codepen and re-added the scroll function. It now works how I imaged. For future development, if I want to add another animation it is best to first develop it without scrollTrigger?

Hey, I cannot seem to see why my code is not working. I'm trying to create a smooth transition from the start text to the end text. That works good. But now I want to let it come from an bottom offset off, let's say for now, 100px. So when you scroll the first title and text fade out, then the next title plus text fades in, but also moves up from the bottom. Does that makes any sense?