Framer X Micro Interactions Design with Disney’s 12 Principles of Animation

Disney knows about animation. So does Framer X. You also know a hell lot about good animation. You may not see it with your eyes but you see it with your brain [1]. Now, what if designs made with Framer X had a little bit of Disney magic?

These are Disney’s twelve principles of animation.

1. Squash and Stretch
2. Anticipation
3. Staging
4. Straight Ahead Action & Pose to Pose
5. Follow Through and Overlapping
6. Ease in and Ease Out
7. Arc
8. Secondary Action
9. Timing
10. Exaggeration
11. Solid Drawing
12. Appeal

There are many videos on YouTube explaining each of these principles. This is a short one.

Saved By The Bell Animation

If you updated to iOS 13 you already saw some of these principles in play. Apple designers and engineers did a good job adding flavor and character to iOS 13. A good example is the bell animation when you disable iPhone’s silent mode. It’s a great micro interaction that feels natural and works very well.

The bell icon is a three part design. The canon, the waist and the clapper. The canon is this small dot on the top from where the bell hangs. The waist is the body of the bell. The clapper is the small ball below the bell.

Here’s what happens when the animation kicks in. Even when the waist stops moving the clapper continues animating. It takes a little longer until it comes to a still. This is how ringing a bell in the real world looks like. It’s a small detail but shows how much love an attention has gone into the product. Obviously it serves a purpose as well [2].

This animation follows the principles of follow through, overlapping and appeal. The main body of the object stops animating but parts of it continue moving until they come to a still. Notice that nothing stops all at once. It is a more natural and fluid animation than having all three parts move and stop together. Not to mention the great microinteraction between hardware [3] and software.

Awesome Prototypes and Animations with Framer X

Fast forward to Framer X and its amazing animation capabilities. In Framer X animation designs work like this. You tell Framer X what to animate and how to animate it. Move this frame for x: 200 with a curve:”spring”. That’s great but very ordinary and lacks of soul.

We can build animations with Framer X with spirit and character. Animations that follow Disney’s principles of animation with very few lines of code. Here’s an example of frame with the default spring animation.

Here’s the same frame with character and spirit. The design follows the squash and stretch, anticipation[3], arc and secondary action. I would add appeal but that’s me.

Here’s what’s happening. The frame becomes a bit smaller. It squashes as if it is gathering energy. While doing so it also stretches a little backwards. Then the whole thing moves back a bit ready to move full of anticipation. At the end it animates with an arc and turns to its initial size.

Now watch the same frame animating with character and spirit. The design follows the squash and stretch, anticipation, arc and secondary action. I would add appeal but that’s me.

Let’s examine what is going on. The frame becomes a bit smaller. It squashes as if it is gathering energy. While doing so the shape stretches a little backwards. Then it moves a little back to create anticipation. At the end it animates with an arc and turns to its natural size.

Better User Experience with Beautiful Micro Interactions

That’s a delightful microinteraction. Some might find it useful while others boring. The usefulness of such ideas, depends on the context, product and design. There is not a one-size fits all solution. Great user experience (UX) comes in all sorts of different shape and forms (and animations).

But the thing is this. Framer X comes with build-in animation like anticipation. Not only that but all short of mass and volume manipulation is possible. The Framer X library covers much if not everything a designer needs.

Merging the two worlds is possible and easy. Disney’s experience and Framer X prototypes on steroids. Okay this might be exaggerating but that’s exactly the point. Right?

---

[1] Jony Ive has talked about things people see but not with their eyes. Cognitive psychology confirms that the human brain understands and reacts to stimuli even when a person is not conscious about it.

[2] The animation improves the user experience by making the action clearer and more noticeable. Note that the animation takes place in a small area on the top of the screen rather than the middle of it.

[3] Apple combined the physical attributes of a mechanical button with the Taptic Engine and software.