How to delight your users with subtle animation

Default avatar.
November 24, 2016
How to delight your users with subtle animation.

Happy Thanksgiving to all our American readers!

Animation is nothing new in digital interfaces. They have had an interesting history of rising, falling and now rising again in popularity. Subtle animations add personality and empathy into an otherwise dull interface. They make experiences fun, delightful and memorable.

Animation in web design has been around for a long while. They first became popular thanks to the .gif format, and later, .swf. However, with a lot of designs not factoring in usability, animation soon became associated with poor UX.

When Flash was no longer cool and HTML5 became the go-to technology, it was CSS3 that picked up the animation baton; specifically CSS transitions and CSS animations. Simpler implementation and smoother performance than even JavaScript made CSS the ideal tool, and designers have been experimenting with animation in UI ever since.

Adding personality with animation

Having your navigation fade in on load provides for a very nice touch; it shows off that your website is elegant; that’s personality. When you use a taxi app and provide a big tip, there is confetti falling down the screen; that’s fun, quirky and unexpected; that’s personality. Small things like that allow for your visitor to make a personal connection with you.

Optimo’s hats do a pretty nice transition on hover, they tip themselves by way of introduction and make room for the hat’s name. It’s beyond subtle, but above all it is a nice touch, this provides a sense of personality, a sense of delight.

Creating an emotional connection with animation

When there is a personal connection, there is an emotional connection. I am now able to like your company and brand; we are now in a relationship because those subtle animations let me see the people—the humans—behind the computer/the machine/the website. These little touches make a company culture shine through. It’s not that hard to see the people behind the company are friendly and probably easy going; it’s therefore easy to connect with them on a personal and emotional level.

Exciting interest with animation

Frankly, quirky animations are fun; they make your website interesting! What’s more, people love it, they will enjoy it so much they will share it with their friends—whether in conversation or a tweet—and they will remember you.

Soleil Noir’s Dream On website is something else. Everything moves, wiggles and what not; but it works very well for the website as it’s fun and supposed to be interesting. Everything is ever so slightly animated; this makes for an instant positive impression.


Not everything is without its downside. There is a fine line between subtle and too much. Animation can also be annoying for users, especially when an animation is placed on every section of a long single page. I had to wait for content once because I scrolled to the bottom of a page and got ahead of the animation which loaded the sections. That’s not good, it disturbs my workflow, it distracts me, it makes me angry.

It might even be inappropriate for some websites to have these animations; when you are a non-profit who wants to be taken seriously, or perhaps a government taxation website, it’s inappropriate for you to have confetti raining down your page when a user logs in or click on a “pay my income tax” button. This could harm your image, making people distrust you. Make sure your animations, whatever they may be, are appropriate for your audience.

Paula Borowska

Paula is a freelance web designer who documents her travels with photos and words. She works with small companies to help them create products that change the lives for their customers all in the hopes of gaining more customers and retaining their current ones longer.

Read Next

3 Essential Design Trends, December 2023

While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…

10 Easy Ways to Make Money as a Web Designer

When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…

The 10 Most Hated Fonts of All Time

Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…

15 Best New Fonts, November 2023

2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…

Old School Web Techniques Best Forgotten

When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…

20 Best New Websites, November 2023

As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…

30 Amazing Chrome Extensions for Designers and Developers

Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…

30 Obsolete Technologies that will Perplex Post-2000s Kids

Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…