Grow your CSS skills. Land your dream job.

Clever Uses for Step Easing

Published by Chris Coyier

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 Julian Shapiro (@julianshapiro) 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 Julian Shapiro (@julianshapiro) 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 Julian Shapiro (@julianshapiro) 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 Julian Shapiro (@julianshapiro) 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 Julian Shapiro (@julianshapiro) 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 Julian Shapiro (@julianshapiro) 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 Julian Shapiro (@julianshapiro) 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: Speed Dramatization by Julian Shapiro (@julianshapiro) 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 Julian Shapiro (@julianshapiro) 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 Julian Shapiro (@julianshapiro) on CodePen.


Contribute

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

Comments

  1. I used step easing recently to create a countdown within a single pseudo-element. Steps let me jump between numbers instead of “rolling” them in:

    I’ve also used steps to scroll text onto the screen, 8-bit style:

    Yeah, fun stuff.

  2. Henry Hoe
    Permalink to comment#

    Very informative. Thank you. I learned something here.

  3. Teo Dragovic
    Permalink to comment#

    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?

  4. Permalink to comment#

    Thanks, Julian!

  5. Permalink to comment#

    Hy Julian.
    Good & nice works.
    Why not one more step?
    Your text to link here…

  6. Sweet! That horse animation was one of my first animation codepens:

    See the Pen Galloping Horse CSS3 by Gary (@garypaul) on CodePen.

  7. Ahh, nice. This reminds me of stop-motion music videos.

  8. This would help to build a Fever
    please

  9. 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!! :)

  10. Lovely examples :) A whole video can be made out of this css trick. Thanks

  11. Permalink to comment#

    @Kseso that is amazing!

  12. SergeyDuid
    Permalink to comment#

    Perfect for html5 retro games!

  13. codehcjp
    Permalink to comment#

    Nice !!! :)

  14. peyman
    Permalink to comment#

    Thanks. This article solved my problem.

  15. Permalink to comment#

    Using this tool, you guys can try out your own step easing animations with Velocity:

    http://codepen.io/julianshapiro/full/oHaCy/

  16. Permalink to comment#

    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.

    • Julian
      Permalink to comment#

      Hit the re-run button that appears when you hover over a pen.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".