Jump to content

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

Show texts then hide using stagger and scrollTrigger

Go to solution Solved by OSUblake,

Recommended Posts


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?




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



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.