Framer X Microinteractions Animation for iOS Todoist Keyboard

Designing micro interactions in Framer X is easy and fast. It’s still a prototype but in a smaller world. Same principles apply. Frames, colors and animations are similar. The only difference is when and how a micro interaction happens.

I like the Todoist app a lot but I noticed something irky. Firing up the keyboard is not as smooth and polished like the rest of the app. Now, I don’t know the inner workings of the app neither of the company. There might be a very good reason for that. A bug, a code rewrite, engineering talent focusing on other things etc. I don’t know.

What I know is that i had to right this wrong. I jumped in Framer X and start designing. A little bit of experimentation led to one thing and then another. The result is a much smoother and natural micro interaction for the Todoist keyboard.

In the video below you see the Todoist keyboard (left) and the new micro interaction (right). It might take a few replays to notice the difference but once you do you won’t be able to look left again.

The keyboard’s micro interaction on the left is out of sync. It feels jerky and almost angry. Like this annoying person we all know who starts speaking by almost interrupting.

The new keyboard micro interaction on the right follows the rhythm of the rest of the UI. It nods gently, takes a tiny pause and then speaks in a calm and reassuring way.