Jump to content

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

Accelerating Scrolling Text with Correct Delay

Recommended Posts

I'm trying to have texts scroll up one by one, then pause at a certain point and then continue to scroll up while fading out. 

I have almost achieved this using ease functions for both the first stagger where the text fades in and moves up and the second stagger where the text continues up and fades out. 


However I want the text to pause briefly in the middle after the first animation.  Since I'm using a power function for the ease I don't know how I can set the delay between the two animations to also be a power function so the timing works out.


I'm just starting out with GSAP so I may be going at this animation in the wrong way.


Any help much appreciated.

See the Pen QWNPBjv by chellgouda (@chellgouda) on CodePen

Link to comment
Share on other sites

Hey Mitchell and welcome to the GreenSock forums and the wonderful world of GSAP!


As with most things, there's multiple ways to approach this situation. I'd probably use a very different approach where you loop through each word and create a different set of animations for each. One tween for the translation and one tween for the ease for each word. Then add those animations to the same timeline so that they're sequenced. I'd likely also use GSAP's SlowMo ease which is great for easing both of those tweens (see what it looks like using GSAP's ease visualizer). Something like this:

See the Pen yLOrRMJ?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

I can't thank you enough.  The information about the "slow" ease is exactly what I was looking for.  I took some time to look over the code so I really understand how it works.

The visualizer really helps to see what is going on.  A fantastic too.  Thanks very much for showing me a different way of solving this problem and one that I will be using in my current and future projects.

  • Like 1
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.