Lazy animation with lazy-ease

Let’s talk about this little snippet of code:

function lazyEase(now, end, speed) {
  return now + (end - now) / speed;
}

In university I was into graphic demos and procedural art. I still am, but it has become a hobby rather than a career. When creating these effects I would sketch them up quickly, getting the basic idea into code as fast as possible. Due to this, I often would try to achieve somewhat complex things like animation through less-than-maintainable means. Suffice to say, my code from that era was exceptionally “hacky”.

A common task that needed to be performed in these sketches is animating something from one place to another. This could be moving a single point to a different location, changing an edge of triangle, or even changing the color of an object. It’s the most common animation problem: change some attribute from starting value to an ending value. As these sketches were procedural art, I didn’t really care about how long it took and wasn’t to worried about finite control. All I wanted was a pleasing, animated transition. Enter what I ultimately called lazy-ease.

The beauty of lazy-ease is you only need to know two things to create a relatively nice animation:

  1. What your current state is (i.e. where you are)
  2. What the end state is (i.e. where you want to be)

This means you don’t need to store (or worry about) nearly as much information that standard animation technics require: start, duration, timing function, etc. The basic algorithm - which is run every frame - is this:

That’s it! now is the current value of the attribute you want to animate - where you are at moment. end is the value you would like to transition to. speed is the fraction of a distance moved each frame. For example, a value of 2 quite fast, a value of 10 takes a bit longer. Astute readers will note that a speed of 1 would snap the value to the end instantly.

The rectangles above are animated using this exact code snippet. Take a look at the terrible animation code here. A lovely side effect of lazy-ease’s feedback loop is changing the ending value mid-animation results in a smooth transition.

Lazy-ease does has many downsides. For example: exact timing can not be controlled. But if you’re rolling a quick sketch and want some value to end up a another value sometime in the near future, lazy-ease is a great snippet to have in your toolkit.