MTR

@Rodrigo Hmm, it still looks like I need to use css transition to make it work. https://codepen.io/MartynasT/pen/JjmGrzj

@Rodrigo thanks! Didn't notice somehow because it was animating chars and not words and looked like masking too. Okay so yeah it uses timeline and uses set. That makes a lot of sense. I managed to solve with css opacity and duration: 0.001 but timeline approach looks better. Going to test it now!

@Carl I manage to solve this. I added transition on span itself in css and used your trick with duration:0.001. Not sure if it's best practice to have transitions in css while using gsap but it seems it works like I want. https://codepen.io/MartynasT/pen/JjmGrzj

@Carl So in that example website section is pinned because it still kinda scrubs word by word like I did. But in that website words animates on its on and its not connected to scrubbing. It's like it starts animation for words like it do (with stagger or something similar) but words smoothly fades in. In my demo words opacity is connected to scrubbing. I still need scrub because it should animate if user scrolls up. It looks like that in that website it triggers additional animation or something so words fade in smoothly.

@Rodrigo thanks. But it looks that in that example it uses masking so it animates not full word but lines.

@Carl and @mvaneijgen thanks for ideas. Both solutions works well, but I think I still want to add fade in but without connecting it to scrub. Instead of opcaity: 0.1 -> 1, I want to make that it animates but word animation is not connected to scrub. Does it make sense what I am trying to say?

Hello everyone, So I am trying to recreate text section from this website: https://chroniclehq.com/ . That section where words appear on scroll. I manage to get to the point where everything almost works, but I have problem with transitions and scrub. How can I make that opacity doesn't animate with scrub but instead word gets opacity: 1 without scrubbing opacity? I tried to add duration: 0, but in that case first word had opacity: 1 before section even pinned to the top. PS. Since initial code was created on my local pc I didn't used splitText plugin and created my own word splitting.

@Rodrigo thanks for these links! It's exactly the thing just I want to make. Will check it now and I hope I will figure it out.

Hello, I am really new to gsap and scrollTrigger so maybe this is really stupid question. So I want to recreate section with sticking cards (image bellow) from this website: https://weltio.com/ . I tried several things but cannot wrap my head around how to make it works like in that website. I used scrollTrigger but then it first card still animates while endTrigger is not reached. But in that website all cards are animate for same time and animation only starts then card pins (or sticks to the top) and last until next card get to the top. Also not sure what should be trigger, section before or cards?