Dazzling Slow Motion Effects For Tomorrow’s Sites

Slow motion effects can be attention-grabbing tone setters in your website. Careful use of animation helps users better understand a changing user interface.

When to Animate Your User Interface

When we see an interface visually animate from one state to the next, it helps the user understand “where” they are in the metaphorical spacial plane of the website, as well as where different UI elements have moved it. It can also work to reveal modal dialogues, highlight selected content for confirmation, or call out important details. With semantic animation, we can use visual effects to improve the user’s interface competency, rather than detract.

The over-eager application of animation is a beginner’s mistake which you should seek to avoid. Do not animate simply to “wow” the user, or to add a layer of polish. These might interface interface artists, but users will hate you if you make their jobs harder with meaningless decoration.

Slow Motion Animation

Slow motion effects are most useful when the transition is subtle and brief. It grabs the eye in a way that stands out among more rapid, system-level user interface animations. For example, growing the size of a button slightly when the user hovers before submitting can help “preconfirm” the user’s action. Any subtle, small-scale animation can have greater impact if slowed down significantly.

Only animate interface elements when the animation itself aids the user.

Do not use slow motion animation to hide or reveal information. Think of those annoying reCAPTCHA puzzles with a slow-motion fade-in, fade-out plays. Because the user must wait for the animation to be completed before continuing it provides no benefit to the user. It only makes them more sluggish. It’s the perfect example of useless animation (tells the user nothing) implemented badly (it slows the user down needlessly). Do not recreate this user interface experience on your own website.

It’s also a bad idea to move user interface elements slowly. Even if you’re not actually costing the user any more time, the impression is that the animation slows the user down. So, if you are using semantic animation to aid the user in quickly grasping a reorganized work space or identify a newly-added list element, you won’t want to use slow motion effects.

In general, practice caution. Don’t push too hard on the slow motion button. Always use it like a valuable spice: just a little goes a long way

Slow motion animation with CSS transition property

The CSS transition property animates the change from one property value to another. As a trivial example, you could animate font size with something like the basic CSS below:

#animate {
    font-size: 1em;
    transition-property: font-size;
    transition-duration: 1s;
    transition-delay: 0.5s;
    transition-timing-function: ease-in-out;
}
#animate:hover {
    font-size: 1.2em;
}

In this abbreviated example of a CSS transition, the beginning of the animation was triggered by the user hovering over the element. Animation can be set on a timer with JavaScript, called based on user interaction with the DOM, or timed out from other events. The transformation property then “smears” the specified transition’s value change, interpolating the states between.

This abbreviated example of a CSS transition would animate a changing font size property on hover. That’s not an ideal user experience, but it’s easy to conceptualize.

All four options for transition (property, duration, delay, and timing-function) can be set separately, as they are in this example, or in a shorthand transition declaration:

#animate {
    font-size: 1em;
    /* property name | duration | timing function | delay */
    transition: font-size 1s 0.5s ease-in-out
}t

By setting a longer transition duration, you can move interface items more slowly than normal. This will simply appear as a slow animation for the user, without any exaggerated effects that indicate it’s moving more slowly than normal.

CSS transition options

transition-property specifies with CSS property will be animated. The animation function must be either set on a DOM interaction, or called with JavaScript.

transition-duration indicates how long the transition will take to move from the first value to the specified value. It’s specified in seconds.

transition-delay indicates how long the animation will “wait” upon the triggering event. In our example, the text will wait 0.5 seconds after the user hovers. If the user breaks the hover before the delay timer is complete, the animation will cancel. Seek to set transition-delay counters that give the user just long enough to “cancel out” of the animation before it begins. Don’t wait so long that it annoys expert users, however. About a half-second or less is typically a good check.

transition-timing-function indicates with mathematical function will be called to indicate the speed of the transition. For example, the “linear” timing function produces a smooth, constant rate of animation, where as “ease” indicates a subjective slowing. ease-in will slow down the beginning of the animation process. ease-out will slow down the end; ease-in-out will slow down both and speed up the middle to accommodate the slower sections of animation. Check these visual examples of various timing functions, sometimes called “easings”, in action.

You might also like the following posts: