Clever Uses for Step Easing

The following is a guest post by Julian Shapiro. Julian has been working on Velocity.js recently, which he has written about here on CSS-Tricks before. Julian lives in a world of animation, so it’s no surprise he’s collected together some interesting examples of exotic animation techniques. Here he shares all about step easing, which you might not even be aware of. A type of animation transition that jumps from keyframe to keyframe in a set number of steps, rather than packing in as many keyframes as possible as animations normally do.

We all know the standard easing types: CSS’s ease and ease-in-out, jQuery’s swing, and the like. But what about the bastard child of easing? What about the easing type that was – for some reason – written into the CSS spec but few people actually know about and even fewer use?

I’m talking about step easing, with which you specify the number of jumps an animation should take to arrive at its end value. For example, if you specify a step count of 4 with the opacity property across a duration of 1000ms, opacity will jump to the following values at the following times:

0ms: 0
250ms: 0.25
500ms: 0.50
750ms: 0.75
1000ms: 1.00

Between those values, opacity stays where it is. The transitions are instant.

How To Use Step Easing

To use the step easing with CSS transitions, pass in step(stepCount) as your easing type:

.has-transition {
  transition: all 1s steps(4);
}

See the Pen CSS-Tricks Step Easing Article: CSS Transitions by CSS-Tricks (@css-tricks) on CodePen.

To use step easing with Velocity.js, a popular and performant animation library, pass [ stepCount ] as your easing type:

$("div").velocity({ opacity: 0 }, { easing: [ 4 ] });

See the Pen CSS-Tricks Step Easing Article: Velocity by CSS-Tricks (@css-tricks) on CodePen.

We’ll be using Velocity.js for our examples below, since it offers fine-tuned tweening control that’s better suited than CSS transitions for chaining complex animations together. Velocity.js has a nearly identical API to that of jQuery’s $.animate(). (We can’t use $.animate() itself because it doesn’t have support for step easing.)

Use Cases

As the title of this article promised, it’s time to explore clever use cases for step easing. Let’s attempt to justify its existence!

Note: To see how these demos were put together, click the JS tab on any of the ensuing CodePen embeds.

Sprite Animation

Let’s get the most popular use for step easing out of the way: sprite animation. This is probably the only use case that you’ve already seen across the Web. The implementation is simple: jump the position of a background-image (which has all the frames of an animation laid out side-by-side) so that we see one “frame” at a time:

See the Pen Velocity.js – Easing (Step) Example: Sprite by CSS-Tricks (@css-tricks) on CodePen.

Clock Hand

Let’s start with most obvious example of all: Mimicking the “choppy rotation” that a clock hand uses.

See the Pen Velocity.js – Easing (Step) Example: Clock by CSS-Tricks (@css-tricks) on CodePen.

Game Board

The premise here is simple. Let’s use step easing to mimic the discrete square-by-square movements of a game board piece. (Without step easing, we’d have to chain a series of CSS property changes back-to-back to accomplish this.)

See the Pen Velocity.js – Easing (Step) Example: Board Game by CSS-Tricks (@css-tricks) on CodePen.

8-bit Gaming

In keeping with our old-school gaming theme, here’s the same discrete translation principle used to replicate the choppy y-axis translation found in Tetris:

See the Pen Velocity.js – Easing (Step) Example: 8-bit Gaming by CSS-Tricks (@css-tricks) on CodePen.

News Ticker

In the same vein as the examples above, let’s mimic the panel-by-panel text translation of news tickers:

See the Pen Velocity.js – Easing (Step) Example: News Ticker by CSS-Tricks (@css-tricks) on CodePen.

Progress Bar

So far, we’ve only looked at obvious use cases that exploit step easing to save us from writing long chains of animation steps. Let’s dive into examples that are more clever.

Below, we use step easing to mimic the “unpacking one file at a time” tween commonly found in a progress bar. We use the step easing only for the beginning portion of the animation before we transition into a fluid “finalizing the install” tween. Chaining together these easing types gives progress bars a feeling of separate stages that indicate which portion of the installation process is currently being executed. (Progress bars’ status indications are often fabricated, so I contend that this actually has use in the real world.)

See the Pen Velocity.js – Easing (Step) Example: Progress Bar by Julian Shapiro (@julianshapiro) on CodePen.

Lag Dramatization

In keeping with the theme of exaggerating the elapsing of time, below is another use of fakery to dramatize the speed difference between two service providers:

See the Pen Velocity.js – Easing (Step) Example: Progress Bar by CSS-Tricks (@css-tricks) on CodePen.

Strobe Light

This strobe effect appears trite upon first glance, but it’s actually fairly clever. To establish a comparative baseline, on top is a typical pulsing animation in which opacity is tweened to 1 then reversed to 0 within an infinite loop. As expected, this gives the appearance of a pulsating light source.

Down below, we have a similar example that uses step easing. Here, the discrete motion jumps caused by the step easing create an uneasy “multi-step flashing” sensation that mimics a night club strobe light:

See the Pen Velocity.js – Easing (Step) Example: Strobe Light by CSS-Tricks (@css-tricks) on CodePen.

If you can’t differentiate between the two examples, use your hand to cover one example while looking at the other.

Paw Prints

What we have here is a single image with a series of paw prints staggered equidistant along the x axis. We pre-clip the image (using the CSS clip property) so that, while the image’s full height is visible, its width is not. We then use Velocity to gradually animate clipRight up to the full width of the image while using a step easing that corresponds to the number of paw prints. In other words, we discretely unclip the image to reveal one paw print at a time:

See the Pen Velocity.js – Easing (Step) Example: Image Clipping by CSS-Tricks (@css-tricks) on CodePen.

Contribute

Have any cool step easing ideas of your own? Share them in the comments!