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:

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:

Clock Hand

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.)

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.)

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:

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:

Great stuff. Question: how much impact on performance would be if we ie. use step(60) over the course of 1s? Would that help keep FPS more steady on complex sequences and is the “cost” of using step more/less/same than standard easing?

Hi everyone
cool easing examples!! I love it all!! :D hehe
but I’m trying to do a easing scroll efect, I mean each time the web page scroll down or scroll up set the mobile scroll. but it’s a little hard… and I found some example but it’s too much code and the page slow down when it’s loading… someone has a lightweight method?
regards!! :)

Man of the animations that you are showing are not working such as the paw prints printing to the right. Could it be that you need to add lazy loading for these to work? On hover is not working to get some of the animations to work.