Gsap scrollTrigger remove transition with scrub

[MTR]

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. 

See the Pen JjmGrzj by MartynasT (@MartynasT) on CodePen

[mvaneijgen]

You can use the ease: steps(1) to have the animation animate in an instant. See more info at the ease visualizer on the docs https://greensock.com/docs/v3/Eases Hope it helps and happy tweening!

 

See the Pen gOBPvWr?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Carl]

Thanks for the demo. If I understand correctly you can use a value very very close to 0 for the duration like

 

duration: 0.0001

 

Your tween is being paused at a time:0 but you also have the first item in the stagger have a duration of 0 with unique start and end states. It's kind of a logical nightmare to handle, and GSAP most often handles it swimmingly. In your case a super low duration gives some amount of time between the start and end and yet will be virtually imperceivable. 

 

The solution from @mvaneijgen is very clever and works great too!

[MTR]

@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?

 

[Carl]

hmm, I don't think I understand fully because if you "still want to add fade in but without connecting it to scrub" my suggestion would just be to set scrub:false or don't set it at all. 

 

However, doing that I think it would kind of odd to have pinning set to true if the animation just runs on it's own. The user would then be scrolling without anything on screen moving or animating in any way.

 

I'm a bit lost at what you want but perhaps a happy medium is having each line stagger in each of its words with a slight fade.

 

Scroll slowly below:

 

See the Pen NWOxYMe?editors=1010 by snorkltv (@snorkltv) on CodePen

 

The basic idea is that each line has it's own ScrollTrigger. Perhaps this will help.

[Rodrigo]

Hi,

 

In this thread this was discussed with other approaches:

 

Hopefully this helps.

Happy Tweening!

[MTR]

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

 

[MTR]

@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]

Hi,

 

There are two examples in that thread. One uses masking and this one uses opacity:

See the Pen mdKWBmm by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[MTR]

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

[MTR]

@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!

[MTR]

@Rodrigo Hmm, it still looks like I need to use css transition to make it work.