I felt it would be useful and worth giving animation itself the due diligence so I decided to look at Disney’s animation principles. I managed to find an interesting article that detailed these principles directly in relation to UI Design which is super helpful.
Disney's 12 Principles of Animation were developed in 1981 by animators Ollie Johnston and Frank Thomas and published in The Illusion of Life: Disney Animation. The principles combine the fundamental laws of physics with cognitive psychology to create animations that feel real and generate emotion. Understanding these principles should help me create animations that feel natural rather than robotic.
UI Animation—How to Apply Disney’s 12 Principles of Animation to UI Design
This creates the illusion of gravity, weight, and flexibility. A bouncing ball stretches when it travels and squashes when it hits the ground. In UI design this makes elements feel tactile and gives feedback about affordances. The key is keeping the volume consistent so when something stretches it gets thinner and when it squashes it gets wider.
Anticipation prepares the viewer for what's about to happen. In UI design you can use anticipation to inform users about what will happen if they perform an action. Hover animations are a perfect example.
Staging guides the viewer's eye to what's important. In an interface with lots of animations everything would compete for attention. Use animation to show where to focus and keep everything else minimal.
