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!
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:
http://codepen.io/lonekorean/pen/kocrl
I’ve also used steps to scroll text onto the screen, 8-bit style:
http://codepen.io/lonekorean/pen/CLoaB
Yeah, fun stuff.
Really interesting use case, Will. Never thought of using step easing on a letter-by-letter basis!
Actually Julian I told you about the typing machine which is a letter by letter example: http://jsfiddle.net/leaverou/7rnQP/light/
There is also the google loading indicator: http://dabblet.com/gist/7387255
Very informative. Thank you. I learned something here.
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?
Good questions.
1) There’s no performance drawback versus standard easing.
2) No, FPS won’t be kept more steady.
Thanks, Julian!
Hy Julian.
Good & nice works.
Why not one more step?
Your text to link here…
I LOVE that example!
Sweet! That horse animation was one of my first animation codepens:
See the Pen Galloping Horse CSS3 by Gary (@garypaul) on CodePen.
My playful oranges has one orange that “shakes” using step animation.
http://codepen.io/garypaul/pen/CyBgE
Ahh, nice. This reminds me of stop-motion music videos.
This would help to build a Fever
please
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!! :)
Lovely examples :) A whole video can be made out of this css trick. Thanks
@Kseso that is amazing!
Perfect for html5 retro games!
Nice !!! :)
Thanks. This article solved my problem.
Using this tool, you guys can try out your own step easing animations with Velocity:
http://codepen.io/julianshapiro/full/oHaCy/
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.
Hit the re-run button that appears when you hover over a pen.