Easier way to step animation?

[CheeseDeluxe (Daryl)]

I have a line of text that’s scrolling horizontally. I want it to move in a slightly jumpy manner, rather than a smooth scroll. Almost like one of those cheapie LED scrolling message boards you see in shop windows. It’s an easy effect to achieve, by moving the text 10px every 0.02 seconds. See attached file.

This has been time consuming to pull off. Is there a more efficient way than using the record button, advancing 2 keyframes, then manually punching in the 10px difference again and again? After I complete this line, I’ve got another one that needs to move in the opposite direction. 500x500.zip (31.3 KB)

[jonathan (Jonathan Deutsch)]

You can create a single animation, and for the timing function use the Math Equation type (requires Hype v4 Pro) with this code that will make the animation jump in a discreet number of steps:

  var steps = 72;
  return (Math.floor((t / dur) * steps) / steps);

Change the value of steps to how many you’d like; it appears you had 72.

Here’s the project with this:

500x500-steps.hype.zip (38.4 KB)

[jonathan (Jonathan Deutsch)]

Another, probably more useful form is to simply specify the number of steps per second:

  var stepsPerSecond = 12;
  var steps = (dur * stepsPerSecond);
  return (Math.floor((t / dur) * steps) / steps);

This means if you change the duration of the animation, the step timing will stay constant - you’ll get more or less steps.

[CheeseDeluxe (Daryl)]

This is fantastic. I knew there had to be a better way. Thanks, Jonathan!

[MarkHunte]

I have to go lay down after looking at the 72steps version…

[CheeseDeluxe (Daryl)]