AI can write animation code. What it can’t do is know what feels right.
It produces motion that works, but feels mediocre, and if you can’t tell the difference, you’ll ship it. You’ll settle for good enough, and that’s not good enough.
This article trains your ability to spot what’s wrong, name it, and fix it. Each exercise shows two animations side by side. Your job is to pick the better one, write down why you chose it, and then see my breakdown.
Putting into words why something feels right trains your ability to articulate your judgment, a skill that will be incredibly valuable in the AI era. Have fun!
Size of an element
Which mobile menu animation feels better?
Choosing the right easing
Which toast animation feels better?
Entry animations
Click both buttons. Which entrance feels better?
Being intentional
Which accordion animation feels better?
Frequency of use
Hover through both lists. Which feels better for something you’d use frequently?
Using scale properly
Click both buttons. Which press feels better?
Removing elements
Remove chips on both sides. Which feels smoother?
Handling interruptions
Open and close each menu rapidly. Which handles interruptions better?
Animating popovers
Click the button on both sides. Which popover feels better?
Using stagger
Which entrance feels more intentional?
Layered motion
Open the side panel on both. Which feels better?
Going a step further
Everything covered here, and more, is covered in my design engineering skill file which you can feed to your coding agents follow these rules in practice.
And if you want to go deeper, check out my animation course for designers and engineers, where I teach practical animation techniques you can use to make products feel cleaner, faster, and more polished:
Check out animations.dev