Zack Lovatt | 2d Technical Director

Bitbucket GitHub LinkedIn Skype Vimeo
April 16, 2013

Preset: Chunky Text Scrolling

Posted In: downloads, expressions, presets

The Idea

You’re sitting at home, watching some awful* action movie in which our handsome Hollywood hero sits down at a computer, faced with a terminal-esque window and has to ENTER PASSWORD in order to be rewarded with the exalted, famed and fabled “ACCESS GRANTED.” Brilliant, right? Oscar material, right here. Well, something I notice so very often in these screens is that the animator just keyframes the y-position and calls it a day, whereas in any console I’ve seen, the text always jumps up in little steps of equal height– so I sought to recreate that for the film I was working on at the time.

*This doesn’t apply in this case, of course. Because I love my work and stand by all of it. Hear that, future employers?

The Code

This will be applied to the Position property and will only modify the y-position from some existing keyframes. So– get your animation all sorted, then apply this expression to chunkify it.

xVal = value[0];
yVal = value[1];
lineHeight = 13.5; // This must be changed by hand!
yOffset = 0; //   This must be changed by hand!

newY = Math.ceil(yVal/lineHeight)*lineHeight;

[xVal, newY+yOffset]

The Explanation

This starts by pulling the preexisting position data, then asks the user (that’s you!) for the line height— that is, the distance from one line to the next. It’s a little silly, but the easiest/least technical way to do this is to look at the y-value of the cursor position before the line, and that of it afterward, and do the math to get the height. Manual? Unfortunately, yes. Fast? Absolutely. (You can also enter an offset value, which just shifts the whole block by offset pixels for fine-tuning. Simple as.)

The fun line of logic processes the line height with respect to the current Y Position (henceforth affectionately known to friends and relatives as yPos), then assigns the new value to a variable called newY. As in, the new yPos. Pretty spiffy, no?

Then we plug that back into the output array with the original xPos, add in the offset, and we’re good to go!

The Application

So– apply the code to the Position property, and you go from having silky smooth text scrolling (on the top, clearly) to a more realistic line-drop animation worth of any summer blockbuster around. Have a better way to do this? Let me know! Came up with this in a few minutes in a time of need, so I’m sure this can be done more efficiently.

Tagged: ,
12 Comments

  1. Renderbrandt • April 17, 2013

    Very cool stuff Zack! Reply


  2. Dayoff • January 29, 2014

    Cool!

    Just one thing, how do you make the whole text to scroll on the opposite way? I've tried to tweak here and there but no luck. Sorry for the dumb question but my coding skills are terrible : P Reply


    • zack • February 3, 2014

      To scroll up instead of down? Just reverse your keyframes so that the position goes up; this expression doesn't alter direction of flow, just smoothness of the animation. Reply


  3. Lovro • April 14, 2015

    Verz nice! Reply


  4. kaeley • June 26, 2015

    how to slow down, thanks! Reply


    • zack • June 26, 2015

      Hey Kaeley-- this uses your existing keyframes and just changes the way it moves; the speed is set by your keys. Slow down the keys and this will move slower. Reply


  5. Jason • September 2, 2015

    Hello - Is this expression able to be used with a text box to constrain the text? Also, is this being used with the after effects "typewriter" animation? Reply


    • zack • September 2, 2015

      Hey Jason-- this applies to the position of the layer itself; it has nothing to do with whether the text has animators on it, so they'll still work just fine. As far as limiting within a text box, that won't work here. I'd suggest using a track matte instead to limit the text you see. Reply


  6. Vishweshwaran • May 22, 2016

    I cant understand what to do with the preset and the expression...can you help me to do????? Reply


    • zack • May 22, 2016

      1) Add two keys to Position
      2) Apply this expression to Position
      3) Adjust lineHeight and yOffset until each line chunk moves the same amount Reply


  7. Th0mas • May 9, 2018

    I like that; it's a really clean way of achieving the effect. You have just saved me quite a bit of time :]
    Thanks Reply


Would you like to share your thoughts?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.