Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Rokuta

Show texts then hide using stagger and scrollTrigger

Go to solution Solved by OSUblake,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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

 

  • Like 1
Link to comment
Share on other sites

@OSUblake

 

Yes! this is exactly what I was looking for.

It works like a charm, thank you!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×