5 micro-animations to make your UI feel more alive

If you’re getting into the world of animation or are simply looking for ways to create more intuitive interfaces, give these code-based micro-animations a go. We’re giving you 5 examples that utilise a variety of code libraries: from React and GSAP, to plain old CSS and Javascript.

1. The ‘quick preview’ video hover

https://codesandbox.io/p/sandbox/video-hover-v5375k

Let’s start with video. Video content continues to dominate most platforms, and its use within websites, particularly as a tool for e-commerce, is on the rise.

How it works:
As you move your cursor over a static thumbnail or use your thumb to hold and scroll, the image immediately transitions into a video clip that keeps playing until you remove your cursor/thumb again.

Why it’s useful:
Having to physically press ‘Play’ to get a video going is becoming less common. These days, people are used to video content playing immediately. So, implementing a 'quick preview' feature like this makes the interface feel more attuned to the user, rather than a simple set of static images. Having a preview function like this (especially on e-commerce sites) can give the user a better insight into the product ‘at-a-glance’ and boost the likelihood of conversions.

2. Scrolling text reveal

https://codesandbox.io/p/sandbox/text-reveal-scroll-9m22z5

GSAP is a fantastic animation library with a variety of different plugins you can use to introduce user-initiated animations to your websites.

How it works:
This specific example uses ScrollTrigger to activate the animation when scrolling between the start and end points, as well as SplitText to animate each letter of the text element. Also, the scrub value can be used to add some additional smoothing to the overall effect.

Why it’s useful:

Big walls of text are a LOT in an era of video-centric content, and people don’t read as much content as they used to. This animation can be a nice way to break up large blocks of text so it’s more palatable for the user, adding a bit of visual interest to otherwise static content. You can also use it to highlight key information and draw the user's attention to specific words or phrases.

3. Loading animations

https://codesandbox.io/p/sandbox/loading-icon-f4yqh6

Infinite looping or idle animations like these can be quite simple to create with plain CSS using @keyframes.

How it works:
Elements can combine multiple animations or use a single animation with different timings to create an offset and delay effect, as shown above. 

Why it’s useful:
These kinds of animations are a great example of ‘visual feedback’ that takes place after a user-initiated action. We’ve all been there when you’ve clicked something, followed by radio silence. You’re just left thinking “…what now? 😬” and more often than not, refresh the page or leave it altogether. Animations like these can be used to reduce ‘rage clicks’, excess refresh rates, and even improve your bounce rates. By showing your user that something is happening, they’re less likely to get frustrated and think your page has completely frozen or stopped responding.

4. Pop-up modals

https://codesandbox.io/p/sandbox/animated-modal-9lzgsf

Pop-up modals are frequently used across a variety of platforms, and can be quite jarring if not considered carefully.

How it works:
Typically, a modal needs to take centre stage and be prioritised over the rest of the page content, so utilising a smoother animation allows it to become the new focus point, without being as abrasive.

Why it’s useful:
Having an animation like this on a pop-up modal takes away the intensity a little bit and makes it feel a little more gentle, rather than the feeling of ‘appearing from nowhere’.

5. Mobile navbar sliding effect

https://codesandbox.io/p/sandbox/sliding-mobile-nav-97pxk7

It’s important when using any sort of navigation, especially on mobile, is that the user knows which page or link they’re currently visiting.

How it works:
This animation consists of a visual indicator (usually a bar or a coloured block) that smoothly slides from the previously active link to the newly active one.

Why it’s useful:
More of an aesthetic choice rather than a wholly functional one, this effect represents the movement of the user through the navigation and is visually smoother than an abrupt change in hover or active states - it’s a subtle change, but it breathes a bit more life into the UI without compromising functionality.