It used to be that designers designed and coders coded. There was no crossover, and that’s the way it was. But with the advent of CSS transitions and animations, those lines are blurring a bit. It’s no longer as simple as the designer dictating the design and the coder transcribing—designers must now know something about code, and coders must know something about design in order to effectively collaborate.
As an example, let’s say a designer asks a developer to make a box bounce. That’s it—no additional instruction. Without some cross-knowledge and a common vocabulary, both sides are a little lost in this communication: the developer doesn’t have enough information to fully realize the designer’s vision, but the designer doesn’t really know what the options are and how to communicate them. With a very basic interpretation, you might end up with something that looks like this:
See the Pen Bouncing Box 1 by Brandon Gregory (@pulpexploder) on CodePen.
Not very exciting. Although, to be fair, this does meet all of the criteria given. We can definitely do better than this, though.
The first thing to look at is the timing function. In the above example, we’re using a linear timing function, which means that the box is constantly moving at the same speed. In some cases, this is desirable; however, in the real world, motion usually doesn’t work like that.
An easy fix is to simply change the timing function to ease. This makes the beginning and ending of each animation a little slower than the middle part, which adds a more natural look to some animations. Here’s the box with the easing function turned on:
See the Pen Bouncing Box 2 by Brandon Gregory (@pulpexploder) on CodePen.
This is a slight improvement, but there’s still a lot of work to be done. The box still looks mechanical and stiff, with the same animation occurring in the same timeframe over and over. Adding a slight delay between bounces adds some visual contrast that seems a little more natural:
See the Pen Bouncing Box 3 by Brandon Gregory (@pulpexploder) on CodePen.
The box now looks like it’s jumping rather than simply moving up and down. There’s a little wind-up and cool-down between jumps that mimics what a live creature might do if given the same instruction. Even though we have no reference for what a jumping box would look like, we all have a pretty good idea of what a jumping creature would look like. Because we know what would happen in nature, by mimicking that, the animation feels more natural. But we can do more to make that wind-up feel a little more weighty.
If you watch cartoons, you’ll notice that natural movements are often exaggerated, creating a caricature of real life. When done well, this can feel just as natural as something in the real world, with the added bonus of infusing a little charm and character into the animation.
At this stage, collaboration between the designer and developer is crucial — but many designers may not even be aware that these options exist. It may be up to the developer to pitch this possibility to the designer.
By adding some subtle distortion to the scale of the box, we can add a lot to the animation:
See the Pen Bouncing Box 4 by Brandon Gregory (@pulpexploder) on CodePen.
Now, the box has character. It feels alive. There are many things to tweak, but this is already moving much farther than the original instruction — in a very good way!
We’re going to go a step further and add a little rebound at the end of the jump:
See the Pen Bouncing Box 5 by Brandon Gregory (@pulpexploder) on CodePen.
The second bounce is making this feel more alive, but something still seems off. The bounce looks stiff compared to the rest of the animation. We need to add another bit of distortion like we did for the wind-up:
See the Pen Bouncing Box 6 by Brandon Gregory (@pulpexploder) on CodePen.
That subtle distortion at the end makes the rebound seem much more natural. Overall, a huge improvement from our basic linear bounce in the first example.
That right there may be exactly what we’re looking for, but further tweaks to the rate of movement can be made with a custom cubic Bézier curve:
See the Pen Bouncing Box 7 by Brandon Gregory (@pulpexploder) on CodePen.
Without both the designer and the developer aware of basic animation principles and controls, this level of customization is impossible. Really, this article just scratches the surface of both fields. If you’re a web designer or a web developer who works with designers, I’d strongly urge you to read up on both.
For animation principles, The Illusion of Life: Disney Animation by Ollie Johnston and Frank Thomas is a great primer on how to make that caricature of real life seem alive and real. With that common language in place, communication and collaboration between designers and developers becomes much easier.
For the technical controls and variations of CSS animation, the possibilities are nearly endless. Delay and timing are simple to adjust. As mentioned, if you don’t like the out-of-the-box ease timing function, it’s very possible to create your own using a cubic-bezier(). You can also adjust the level of distortion you want to bring the animation closer to or further from reality. The important thing is that both the designer and developer are thinking about these variations rather than blindly taking everything without customization. Shared knowledge and collaboration can make even simple animations into great ones.
More Resources
- 12 basic principles of animation - Wikipedia post outlining the concepts introduced in The Illusion of Life.
- The Guide to CSS Animation: Principles and Examples - Smashing Magazine article providing a comprehensive guide to CSS animations.
- Animation in Design Systems - 24 Ways article by Sarah Drasner
- Animation property - CSS-Tricks almanac entry covering the property and its values
- Transition property - CSS-Tricks almanac entry covering the property and its values
- CubicBezier.com - Resource to create custom animation curves with a user interface.
Making CSS Animations Feel More Natural is a post from CSS-Tricks
from CSS-Tricks http://ift.tt/2qLG5eL
via IFTTT
No comments:
Post a Comment