Accelerating Scrolling Text with Correct Delay

[MitchellG]

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

[ZachSaucier]

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

[MitchellG]

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.