Staggering Text Math

[Pipsisewah 2 Likes (Newbie)]

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!

[Carl 9,066 Likes (Superhero)]

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.