Show texts then hide using stagger and scrollTrigger

[Rokuta]

Hi,

I want to make texts fadein and slideup when page loaded,

then slideup again and fadeout when user scrolls down.

 

But first letter not animated and hidden immediately.

 

I also tried fromTo instead of to for fadeout animation but it makes first animation flickers.

See the Pen WNXbzqR by rokuta (@rokuta) on CodePen

 

What am I missing?

thanks

 

 

See the Pen QWOwmYG by rokuta (@rokuta) on CodePen

[OSUblake]

Welcome to the forums @Rokuta

 

Your animations might be conflicting with each other, so I would just kill the first one when the ScrollTrigger starts. I also used immediateRender: false as ScrollTrigger animations have it set to true.

 

 

Is this what you're looking for?

 

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

 

[Rokuta]

@OSUblake

 

Yes! this is exactly what I was looking for.

It works like a charm, thank you!