Jump to content

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

Staggering Text Math

Recommended Posts



I am having a little trouble with finding a good equation for animating text with a fixed play length.


A user needs to be able to tell me:  "I want this animation to play for [x] amount of seconds"


I am using TimelineMax.staggerFrom with a SplitTextField to make this happen.



I first need to ensure my understanding of StaggerFrom is correct.  In this case, lets say we are doing a fade in by character.


Here is my understanding of how this should work:


T = total time (2 seconds in this case)


C = total number of characters (let' use the word "Hello", so this is 5)


A = time for each character to fade in


S = stagger time (time between letters starting to fade in)



I inferred from the documentation that the total time of a StaggerFrom could be calculated by the following equation:


T = (S * (C-1) + A)



"Hello" in 2 seconds


2 = (.35 * (5-1) + .6)


This is saying that the total time equals the total of all the stagger times plus the time it takes for 1 character fade in.





The difficult part, which I am having trouble with, is using different numbers for the stagger time and fade time, as I want the characters to overlap on the fade in.


I believe my equation for how the StaggerFrom is working is incorrect, since my simulations in Excel all work but when I port it over to actionscript (and yes I checked the variables at runtime and they are matching my simulation), it only plays for around 1 second.



If anyone could help correct my understanding of how StaggerFrom works, I would greatly appreciate it!


Thank you!

Link to comment
Share on other sites



Thanks for your thorough post. I can verify that your equation is correct. 

Keep in mind that it is very difficult to judge when an alpha tween actually ends as a value of 0.95 is going to look very much like 1. 

Also depending on the easing you are using, the tween may slow down quite a bit at the end when the values are very very close to 1 (when fading in).


Fortunately you do not have to guess.

If you put your staggered animation in a timeline you can just ask the timeline for its duration


var T;   // total duration of animation
var C = 5 //number of items (5)
var A = 0.6;  //duration of each animation
var S = 0.35 //stagger time
var tl:TimelineLite = new TimelineLite()tl.staggerTo(myLettersArray, A, {y:100}, S);

T = (S * (C-1) + A)
trace("estimated time = " + T); //2
trace("actual time = " + tl.duration()) // 2

I made a quick prototype using JavaScript. The GSAP syntax is identical.


Visit this demo: http://codepen.io/GreenSock/pen/vEGBjQ?editors=101

1: edit the A and S var values

2: hit run

3: see that both the estimated and actual values are the same.

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.