Web animation is a great tool for improving the user experience. You can use motion to explain difficult concepts and make them easier to understand. Animations also enable us to add UI interactions to a site or app, which significantly increases engagement and ensures customers not only stick around for longer, but are also more likely to return to our 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, but also informative, representative, and clear is a challenge that can be tricky to get 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 designer Chris Gannon points 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
Chris 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.
“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.”
Details are the gateway to nuance
Chris 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, Chris 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.
2. Reward people for visiting a site and making a purchase
For front end developer Eli 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 like gaming loot boxes and 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,” Eli 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 Eli 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
“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, Lisi recommends the new GSAP 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.
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, Lisi 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 on Etsy, the other one is a Shopify Store,” she suggests. “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.”
Lisi 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.
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,” Lisi 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 developer Donovan Hutchinson, who runs cssanimation.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.
Donovan, 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”.
On ShopIreland.ie, for example, Donovan 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:
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. However, while these are useful, Donovan 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.
“Custom timing functions are a series of four numbers that describe two points on a graph,” Donovan 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, Donovan uses this fast ease-in function when he wants something to arrive sharply but then gracefully glide to a stop:
Similarly, if you want something to seem to “bounce” into place, Donovan recommends this function:
Even when animations take the same length of time, a different timing function can really change how it feels. To get started, Donovan recommends cubic-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 things:
You might also like: Using Animation to Improve Mobile App User Experience.
7. Try using CSS custom properties for staggered web animations
“By setting a custom property equivalent to the element’s index, we can use
calc() to calculate a variable for the
animation-delay value, 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:
This technique can even work with text, but Michelle 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. If you want more control over your staggered animations, Michelle recommends the library Splitting.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
Michelle is also a big fan of the CSS Motion Path module (check out the browser compatibility table), which enables you to position and animate elements along a custom path.
It requires two crucial properties:
offset-path to define the path, and
offset-distance to position an element a set distance from the start of the path. The
offset-path property takes a value similar to an SVG path’s
offset-distance value 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 Michelle’s fun Typo-coaster experiment below:
You might also like: Using CSS Animations to Guide 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 lead UX designer Stéphanie Walter.
"It’s important to proceed with caution when using animations."
“Some people suffer from vestibular disorders or 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 the
prefers-reduced-motion media query to adapt the motion.
“This doesn’t mean that you need to remove all the motion,” Stéphanie explains. ”But you can adapt your animations to be less triggering for users who choose this parameter.”
In Stéphanie’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 have
prefers-reduced-motion set to
reduce, it’s possible to change the moon and sun motion to a fade-in/out. To further reduce the potentially problematic motion effects, Stéphanie 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, and illustrations, animations convey a specific message and meaning. For example, Stéphanie points out that bouncy, funny animations would work for a game like Dots or 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.
Stéphanie 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.)
- Timings 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, Stéphanie suggests checking out the Motion and Animation section 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
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.
Web animation can give your client’s (or your own) 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.
Grow your business with the Shopify Partner Program
Whether you offer web design and development services or want to build apps for the Shopify App Store, the Shopify Partner Program will set you up for success. Join for free and access revenue share opportunities, developer preview environments, and educational resources.Sign up