My collection of UI microinteractions and microanimations

Oleksandr Pronskyi
Feb 13, 2018 · 4 min read

Two years ago, I started making experiments with microinteractions and over this time I came up with quite a few concepts I would like to share. I started doing this in my free time to boost my animation skills, learn new tools and of course to have some fun. I’ve been focusing mostly on animation and interactions so I didn’t waste much time on perfecting pixels, applying pretty color schemes and polishing dribbble shots.

Over this time I tried different tools for creating interactive prototypes and animations such as After Effects, Principle, Framer, Kite, Proto.io, Pixate(R.I.P.), SVG, CSS animations and even Keynote. Of course I haven’t mastered all of these but definitely found which ones work for me. Messy source files are available for the most of the animations just in case you would like to check how it’s done. I wasn’t planning to share sources initially so some of them are not that well-organized, sorry.

This exercise helped me to speed up my animation and prototyping workflow, get a better sense of UX Choreography and even meet new like-minded people!

Gifs are in no particular order. Curious to hear your thoughts!

Image for post
Image for post
Smiley rating slider
Image for post
Image for post
Downloading process v1
Image for post
Image for post
Connecting to Wi-Fi with error state
Image for post
Image for post
Pushy input field
Image for post
Image for post
Boolean toggle (Rebound of this great shot)
Image for post
Image for post
Downloading process v2
Image for post
Image for post
Design to code loader
Image for post
Image for post
Read/unread
Image for post
Image for post
Cloud loader
Image for post
Image for post
Smiling Spinner
Image for post
Image for post
Loading…
Image for post
Image for post
Camera/photo icons transition
Image for post
Image for post
Front/back camera switch
Image for post
Image for post
Filter/close icons transition
Image for post
Image for post
Settings/close icons transition
Image for post
Image for post
Lock/Unlock icon
Image for post
Image for post
Map/List view transition
Image for post
Image for post
Play/Pause icons transition
Image for post
Image for post
Search
Image for post
Image for post
Burger :)
Image for post
Image for post
SVG loader
Image for post
Image for post
Add new contact
Image for post
Image for post
Statistics
Image for post
Image for post
Player widget
Image for post
Image for post
Paper loader
Image for post
Image for post
Add to shopping bag
Image for post
Image for post
Attachment
Image for post
Image for post
Removing documents
Image for post
Image for post
Like

Most of the works showcased above were made using Principle app. If you want to learn more about this tool please check my next post Principle tips and tricks.

More gifs and other works on my dribbble.

It’s my first post on Medium. Crits and suggestions welcomed!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store