Animation

10 microinteractions that will inspire your next project

4 min read
Catarina Marques Teles
  •  Jan 3, 2019
Link copied to clipboard

I always appreciate the small things in life: a greeting smile from my neighbor, a tiny postcard from my mom, or a loyalty stamp card from my favorite coffee shop. When it comes to design, I always get excited by these same tiny details: meaningful transitions, cute animations, and microinteractions.

Let’s cut to the chase: What *are* microinteractions? According to Dan Saffer, “microinteractions are contained product moments that revolve around a single use case—they have one main task”. So far, so good.

But now imagine a world without them. What if the little bell in your Facebook app didn’t jump when opening the app to indicate you have new notifications? What if the loading symbol of your favorite e-commerce website stopped rotating?

It’s the attention to detail that differs a great website from an ordinary and—let’s be honest—boring one. Here are 10 of our favorite microinteractions the community on Dribbble and Studio is creating out there, and get you rocking and rolling with inspiration for your next project:

Hamburgers in motion

By Matthieu Souteyrand

Keep your eye on the I…X…III…

Dude, where’s my disk?

By Szilard Nagy

Car windows, micro-sim cards, or disks? Either way—delightful interaction, created by Szilard Nagy.

Follow the sign

By Ansell Leitao

Improve your navigation with this grand 3-bar exit transformation.

Show us how you bounce

By Oxygenna

Hover interactions can be a great way to engage customers with the product. Beautiful coloring doesn’t hurt.

Drag…and snap

By Yancy Min

Highlight an element’s interactivity with its own microinteraction.

Send ‘em up, bring ‘em down

By Camille Raviart

Insert some movement and create some emotions.

Draw it out

By Jake Deakin

Explore icon animation as a way of calling attention and adding delight.

Space is the place

By Bojan Mesar

Could this astronaut to surfer animation be any cooler?

Welcome to my world

By Althaf Roshan

This welcome loader for Althaf Roshan’s personal website creates a beautiful experience for visitors.

Oops, I 404ed again

By Akhil Krishnan

Who said 404 pages need to be boring and static?

Type it out, type it out

By Julia Vedenyapina.

EnVision this as a microinteraction while waiting for a website to load.

All interactions were created with InVision Studio. Download it here and start creating now!

Collaborate in real time on a digital whiteboard