Micro-interactions Tutorial & Giveaway with Adobe XD.

I partnered with Adobe XD to bring you this tutorial to create micro-animations using the Animation Principles.

In 1981 two bright Disney animators Ollie Johnston and Frank Thomas introduced twelve basic principles of animation to produce more realistic works. Since then the principles have been adopted by almost every professional animator, and have been referred to by some as the “Bible of animation.”

Even though these principles were created to animate cartoons, I wanted to apply them to UI elements.

Squash & Stretch: When elements get longer or flatter to emphasize the action.

Anticipation: Prepares the user for an action that it’s about to happen.

Staging: It directs the user’s attention toward the element that needs to be emphasized.

Straight ahead and pose to pose: Straight ahead refers to an animation made frame by frame. Pose-to-pose gives you more control defining the keyframes of your animation.

Follow-Through and Overlapping: It’s about planning sequences of motion; where elements move in the same direction to reinforce the action.

Ease In & Ease Out: Controls the speed of elements, when they start and end; it creates a smoother animation.

Arcs: It’s a curved trajectory that gives the illusion of life to an animated element.

Secondary Action: Supports the animation to complete or emphasize the main action.

Timing: Timing is about where on a timeline you put each frame of action.

Exaggeration: Is a great way to increase the appeal of an element, and enhance the storytelling.

Solid Drawing: Refers to treating shapes as if they are solid objects, and are subject to the natural laws of physics.

Appeal: There is no formula for getting this right. The key is to stay consistent in motion, design style, and feeling, so you can best showcase your idea.