My collection of UI microinteractions and microanimations

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!

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