Every once in a while you will interact with a feature element so subtle, yet so intriguing you will simply be impressed. You, impressed. That's not easy, right? But it happens. And then the curiosity sets in. Take slack.com's loading animation by CrocoDillon. This imaginative use of both width and shadows on a single element, and it's corresponding before and after pseudo-elements, is proof that the sum of parts is indeed greater than the whole.
To understand the transitions at work here, we must first understand how to create some basic shadows on a single element. After all, the box-shadows are what steal the show here. Four shadows work together in animated scenes that simultaneously create the grow, shrink, and rotation effects we see in the slack loader. These effects are really artifacts of our animated shadows on a single element.
Two shadows are controlled by one set of keyframes wired up to the before pseudo-element, and the other two shadows are controlled by a second set of keyframes wired up to the after pseudo-element. If you understand the animation sequence in the before keyframes, then you will understand the sequence in the after keyframes. Lets focus on the keyframes wired up to the before pseudo-element. Here are the borders at work on one element that happens to have been rotated 165 degrees.
The above pen in really just box-shadow 101, maybe, but it's crucial to understanding the transitions at play in the original animation. I forked CrocoDillon's original pen to take this understanding a step further by doing the following:
- Isolating only a single set of keyframes (remember, understand one and you understand the other).
- Making small changes like increasing the width/thickness and border radii of the shadows.
- Slowing down the animations to observe their behavior
Here's the forked pen. Compared with the finished product, it looks as if the elements are perhaps in the wrong place and the example is wrong. But change only the size and the thickness vars to 2.5em and 0.5em, respectively, and you'll see what you expect.
Commenting out just one line, and thus activating the after keyframes brings us much closer to the finished product:
and finally ...