Login Form Shake Effect with Anime.js Keyframes

AJ Meyghani
Aug 31, 2018 · 4 min read

Creating well balanced micro-interactions can greatly enhance the user’s experience and distinguish an amazing app from an average one. The best micro-interactions are the ones that are barely noticeable, but can delight the users without them even noticing.

In this article we are going to create a login form that subtly shakes and changes color in response to invalid credentials using Anime.js:

Responding to invalid credentials by shaking the login form. Design inspiration from Jon Pritzl

Keep the story going. Sign up for an extra free read.

You've completed your member preview for this month, but when you sign up for a free Medium account, you get one more story.
Already have an account? Sign in

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