Reproducing A Clever Animation Product, Part 24

Today I added a new effect and applied it to a top tween that makes up the latest addition to the animation. The effect is based on this equation from the first class you take in physics:

x = x_o + v_ot + at²/2

where:

x = location
x_o = initial location
v_o = initial velocity
a = acceleration (due to gravity in this example)
t = time (in animation steps)

Note that when working in screen coordinates, positive numbers increase going down. Here’s the code I added to the processEffect function.

I had to tune the values for the initial velocity and acceleration so the path of the moving element covered most of the designated screen area and most of the designated time. It should be possible to invert the equation so that the extents of the desired path and time span are specified and the values for initial velocity and acceleration are back calculated to achieve the desired results.

Here’s how the effect is defined by the user. I added a simultaneous sideways motion to make the text look a bit like a projectile (think of a cannonball). I initialized the affected element to start just below the bottom of the demo window and the element finished somewhere below the bottom of the demo window as well. If I put a bunch of these together in the right way I can replicate the fountain-like effect on the Greensock home page (it starts at about the halfway mark).