10 Ways to Create Delightful and User-Friendly Web Animation

Web animation is a great tool for improving the user experience (UX). You can use motion to explain difficult concepts and make them easier to understand. Animations also enable you to add user interface (UI) interactions to a site or app, which significantly increase engagement and ensure customers not only stick around for longer, but are also more likely to return to your clients’ websites.

Web animation is therefore playing an increasingly important role in modern web and app development. However, delivering work that is not only pleasing to the eye and functional, while also informative, representative, and clear can be tricky to get just right.

For this article, we invited six web animation experts to share their top tips on adding motion to user interfaces. We’ll cover UX principles and best practices, CSS animation techniques, advice on creating more inclusive web animations, and more. As you can’t really talk about web animation without showing any examples, we’ve also included plenty of demos to help inspire you.

Let’s get started!

1. Use details to create delight

Award-winning animator, illustrator, and interactive designerChris Gannonpoints out that one of the central tenets of animation (and indeed any creative discipline) is the attention to detail. He calls it the rich, golden seam that weaves its way through everything we do.

Details are the currency of authenticity

Gannon highlights the importance of the little details in your UI interactions by quoting a rather disheartening rule: “If the audience notices your work, you haven’t done your job properly.” It measures success on what the audience senses rather than what they see.

“If the audience notices your work, you haven’t done your job properly.”

“I’m talking about a barely perceptible shimmer, a subtle interaction between two elements (honoring the laws of physics). A shadow, a reflection,” he explains. “These details are designed to work in harmony together. Their combination enhances the result and resonates with the viewer on a more subconscious level, promoting a sense of authenticity. Get one wrong, though, and the illusion is shattered.”

See the PenSPECIMENby Chris Gannon (@chrisgannon) onCodePen.

Details are the gateway to nuance

Gannon advises that details can also play many different roles in storytelling.

“Walt Disney once said, 'There is no magic in magic, it's all in the details.' I interpret this to mean that details can play a vital role in delivering nuance to a story. They can be hidden gems that reveal a secret or subtle conduits that convey a sense of care and craftsmanship. They can create a frisson of delight, or unearth a common interest amongst observant viewers; there’s really almost no limit to the power or function of the humble detail.”

There is no magic in magic, it's all in the details.

However small the details, Gannon points out that they can pay big dividends in the authenticity and depth of our work, so it’s our responsibility to strive for that authenticity in everything we make.

You might also like:How to Meet the New Accessibility Requirements of the Shopify Theme Store.

2. Reward people for visiting a site and making a purchase

For front end developerEli Fitch, animation is one of the most powerful tools at our disposal for managing a user’s emotional response. He cautions that these principles of animation are so powerful in fact that they are maliciously used in applications likegaming loot boxesand virtual slot machines to get people to spend more money.

“In the right hands, however, animation can give people a warm, pleasant feeling, making them feel more welcome or happy to use your [client’s] app or website,” Fitch advises.

“By using a moderate amount of anticipation, followthrough, and even some squash/stretch if your [client’s] brand is on the playful side, you can evoke these feelings.”

Here are two animations Fitch designed for a prototype game day beer ordering app that used playful animations to reward users:

You might also like:30 Developer Resources to Diversify Your Skill Set.

3. Consider using scrollytelling animations

We’ve already learned that animation is a useful storytelling tool. One specific technique, as suggested byLisi Linhart, a technical team lead atStoryblok, is called "scrollytelling."

“The main application of scrollytelling animations has been in data visualization, but they can also be beneficial in ecommerce websites,” she explains. “They help tell a product's story more engagingly. The customer is guided through the experience of exploring a brand by slowly revealing the information. Often they can even control the animations by how fast or slow they scroll. This makes any site more interesting and catches a lot of attention.”

By giving some control over the interaction to the user, the process of scrolling through informative content becomes more playful. The technique also enables you, the developer, to control what is revealed when.

To help build scrollytelling interactions, Linhart recommends the newGSAP ScrollTrigger Plugin, which in the demo below animates a 3D object of a plane and slowly teaches the users about planes by letting them control the experience through scrolling.

See the PenAirplanes.by Steve Gardner (@ste-vg) onCodePen.

4. Incorporate expanding information animations

Ecommerce sites often want to present as much information as possible to potential customers to convince them to buy a product. However, Linhart warns that this can lead to information overload and result in customers leaving the site without making a purchase.

“Let’s take a look at two examples of displaying products: one is onEtsy, the other one is aShopify Store,” she says. “Which page makes you more focused on the product? Of course, Etsy has a different goal with millions of products, but this way of overloading information is very common in ecommerce sites.”

Linhart recommends expanding information animations as a technique if you want to provide full animations but also don’t want to overload the customer’s senses.

See the PenExpand Informationby Lisi (@lisilinhart) onCodePen.

In the example above, the opening times are only displayed once the customer clicks on the clock icon. Instead of always having them visible, which would add a lot of visual clutter, they’re shown when the user actually wants to see them.

“This can be applied to any information and is often useful if you have some extra information to show, but don’t want to render a completely new page,” Linhart explains. By using an animation to reveal new information, we can draw the user’s attention to it.

"By using an animation to reveal new information, we can draw the user’s attention to it."

5. Draw attention to content with one-direction animations

Front end web developerDonovan Hutchinson, who runscssanimation.rocks, has found that when people think of animating between two states they often intend to animate one away, and then animate the second item into place. This means creating two animations, an “out" animation and an “in'' animation.

Hutchinson, however, suggests choosing to only animate the “in” portion of a transition as animation is most useful when applied minimally.

“It’s a simple trick that makes navigating pages with animations quicker,” he points out. “It also makes it easier to draw attention to content changing.”

OnShopIreland.ie, for example, Hutchinson often fades in a new page of content, but doesn't insist on fading out the old page. The result is snappier, and people don’t have to wait for the new content to begin showing.

Here’s a one-directional snappy cart animation from ShopIreland.ie:

See the PenOne-directional snappy cart animation from ShopIreland.ieby Donovan Hutchinson (@donovanh) onCodePen.

6. Use CSS custom timing functions

Another animation technique—CSS timing functions—lets us control the rate at which things slow down or speed up through the course of an animation or transition. There are built-in timing functions such as “ease-in,” which starts slowly and then speeds up, or “ease-out,” which starts fast and slows down toward the end.

While these are useful, Hutchinson tends to avoid them unless he can use them for something simple like a fade-in transition. For anything more important, he creates a custom timing function.

“自定义时间函数的一系列四麻木ers that describe two points on a graph,” Hutchinson explains. “These points are used to generate a curve that shapes an animation’s progression through time. With them, we can go much further than the default functions. We can have animations with much sharper changes in speed, starting or ending more quickly, or even overshooting and bouncing back.”

For example, Hutchinson uses this fast ease-in function when he wants something to arrive sharply but then gracefully glide to a stop:

cubic-bezier(.01,1,.4,1)

Similarly, if you want something to seem to “bounce” into place, Hutchinson recommends this function:

cubic-bezier(0,1.61,.57,.87)

Even when animations take the same length of time, a different timing function can really change how it feels. To get started, Hutchinson recommendscubic-bezier.com. Drag the handles to make a curve that describes the kind of animation you want to create.

Try tweaking this transition and see how the properties affect the variables:

See the PenExercise: Timing functionsby Donovan Hutchinson (@donovanh) onCodePen.

You might also like:Using Animation to Improve Mobile App User Experience.

7. Try using CSS custom properties for staggered web animations

If you want to create staggered animations on groups of elements, front end developerMichelle Barker, author of theCSS {In Real Life}blog, recommends CSS custom properties.

“By setting a custom property equivalent to the element’s index, we can usecalc()to calculate a variable for theanimation-delayvalue, and have our elements animate sequentially,” she explains. “We can even set the custom properties in the HTML itself, within a loop (if we’re using a templating language). That way, it’ll work with dynamic content.”

Here’s a simple example:

See the PenStaggered animation with custom propertiesby Michelle Barker (@michellebarker) onCodePen.

This technique can even work with text, but Barker advises to add an accessible alternative, as some screen readers will announce each letter instead of the whole word when letters are wrapped in individual elements.

如果你想要更多的控制你的史塔哥ered animations, Barker recommends the librarySplitting.js, which assigns each element in the group a custom property as above, plus another custom property for the total number of items.

8. Use the CSS Motion Path module

Barker is also a big fan of the CSS Motion Path module (check out thebrowser compatibility table), which enables you to position and animate elements along a custom path.

It requires two crucial properties:offset-pathto define the path, andoffset-distanceto position an element a set distance from the start of the path. Theoffset-pathproperty takes a value similar to an SVG path’sdattribute.

“It’s really exciting to have this in CSS, when it would previously have been the domain of JavaScript libraries,” Barker points out. “Theoffset-distancevalue can be animated using transitions or CSS keyframe animations, which allows for some very cool effects, enabling our elements to dance across the screen.”

Combined with custom properties, we can work even more magic—such as animating a string of text along a path, as demonstrated in Barker’s fun Typo-coaster experiment below:

See the PenTypo-coasterby Michelle Barker (@michellebarker) onCodePen.

You might also like:使用CSS动画指导a Better Ecommerce Experience.

9. Build inclusive and accessible CSS animations

As we have seen, animations can be very powerful: they attract user attention, help people understand how the interface is working, and more. But, it’s important to proceed with caution when using animations, advises UX researcher and product designerStéphanie Walter.

"It’s important to proceed with caution when using animations."

“有些人遭受前庭障碍或者might be prone to seizures,” she explains. “For those people, your animations become an accessibility issue. At best, they can make them feel uncomfortable. At worst, they can also trigger motion sickness, nausea, and render your website unusable for some users.”

The level of sickness and what triggers it differs from person to person. Check out “Your Interactive Makes Me Sick” for a first-person account of why animations can cause problems, and what to do about it.

There’s also a list on Apple’s WebKit blog about “Responsive Design for Motion” that describes some of the triggering motion. In 2013, Apple introduced a system parameter called “reduce motions.” This lets iOS users turn down the motion animations in iPhones and also on MacOS. Other operating systems followed.

Today, we can use theprefers-reduced-motionmedia query to adapt the motion.

“This doesn’t mean that you need to remove all the motion,” Walter explains. ”But you can adapt your animations to be less triggering for users who choose this parameter.”

See the PenDay and Night: CSS Transitions and animations explainedby Stéphanie Walter (@stephaniewalter) onCodePen.

In Walter’s demo above (which explains CSS transitions and animations), the moon and sun move a lot, as do the shooting stars in the background. Both animations can be non-inclusive.

But if users haveprefers-reduced-motionset toreduce, it’s possible to change the moon and sun motion to a fade-in/out.

To further reduce the potentially problematic motion effects, Walter also disabled the shooting stars and made the solar system motion super slow.

10. Follow animation guidelines and design systems

Animations are now part of brand identity and guidelines, too. Just like colors, voice, shadows, illustrations, and animations convey a specific message and meaning.

For example, Walter points out that bouncy, funny animations would work for a game likeDotsor a website for children, but they might feel off brand for an insurance company.

The documentation of animations is therefore increasingly being included in design systems. Google was one of the first companies to do this when they featured a whole section dedicated to “Understanding motion” in its “Material Design” system.

Walter recommends to document the following in your design system:

• The purpose of animations:When and why to animate (Firefox has some interesting “motion principles,” for example)
• The different types of animations:What to animate (loaders, transitions, interactions, etc.)
• Timing and easing:If you want to maintain consistency in your design system, all animations need to have the same kind of timing and easing

Also consider adding visual examples of best practices (as you would for the use of a logo), so everyone is on the same page and knows what to do, but maybe also what not to do with animations.

For an example, Walter suggests checking out theMotion and Animationsection in Foyer’s design system. It documents the duration, some keyframed animations, what type of easing and timing functions should be used, and more.

Gain a competitive advantage with web animation

Web animations have many benefits. They enable you to bring your work to life and delight users.Microinteractions—very small web animations—in particular can draw a user’s attention to something on the page, provide feedback, or simply reward them for making a purchase. Thanks to advances in CSS and JavaScript, implementing web animations and controlling how they feel is now easier than ever.

In this article, we learned how powerful a tool web animation can be. As animations can increase engagement and trigger emotional responses, it’s important to follow best practices and not use them for malicious manipulation.

Also, be aware of accessibility and inclusive design considerations, because web animations can be harmful to users with motion sensitivities. Finally, for bigger projects, document the use of web animations, create motion guidelines, and integrate them in design systems. It’ll save you time and ensure your client’s brand uses animation consistently, effectively, and responsibly.

网络动画可以给客户(或你自己)customers a competitive advantage. Keep your animations short, simple, and meaningful, and you’ll be well on your way to enhancing the user experience with motion.