50 Micro-

50 Micro-

50 Micro-

Interactions

Interactions

Interactions

PASSION PROJECT

LEAD DESIGNER

LAUNCHED

From loading indicators to emoji reactions, this collection includes everything a designer needs to add some delightful animations to any user experience.
With design tools and other technologies making it easier and easier to add more elaborate interactions to the products I designed, I decided to explore animation, and created a toolkit of micro-interaction animations that are all compatible with the Lottie library from Airbnb. All of these animations, and many more can be downloaded and freely used as you’d like at my page on the LottieFiles website.

16 / Checkboxes

A couple variations on checkbox interactions. One that has a filled box when selected, and the other, with a bold outline when selected.

23 / ON/OFF Toggle

23 / Toggle

An animated toggle, with on and off indicators visible in each state, respectively.

25 / Bluetooth

An icon transition from the Bluetooth symbol to an icon to represent the audio device that connected.

28 / Selfie Cam

28 / Selfie

Button animation switching from the back-facing camera, to a front-facing selfie camera.

34 / Lock

A simple lock and unlock animation. Think — locking a layer in a design file, for example.

43 / Buy Button

43 / Button

An interactive buy button, with animation for biometric authentication of the purchase.

Eddy Gann © 2024

16

23

25

28

34

43

Checkboxes

Toggle

Bluetooth

Selfie

Lock

Button