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

# Staggering Text Math

## Recommended Posts

Hello,

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)

example:

"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!

##### Share on other sites

Hi,

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.