Now that we have the fly-in motion in place, let’s think about other ways to improve the animation even further. A good source of inspiration is animated cartoons, and the concepts and tricks that animators use to create them.

Disney’s Twelve Basic Principles of Animation is a set of principles for producing more realistic animations based on the work of leading Disney animators during the golden age of animation. The principles were introduced in The Illusion of Life: Disney Animation, which has by some been referred to as the Bible of animation. Let’s examine them and see how we can apply some of the principles to our signup form here.

Fourth Iteration — Follow Through and Overlapping Action

Follow Through and Overlapping Action are two related techniques that help give the impression that animated characters or objects follow the laws of physics. In essence, they show that different parts of an object may move at different rates during motion, or continue moving after the motion of the main object has stopped.

In the animation above, you’ll see a couple of frames of the button moving independently after the form has stopped. This gives the illusion of the button being a separate object with its own weight, rather than the entire form feeling like it’s just a flat, rigid paper card.

.form {

animation: form-fly-up 1s linear;

} .button {

animation: button-bounce 1s 0.12s linear;

}

@keyframes form-fly-up {

…

} /* Generated with Bounce.js. Edit at http://goo.gl/TvjpS6 */@keyframes form-fly-up {

@keyframes button-bounce {

…

} /* Generated with Bounce.js. Edit at http://goo.gl/sNmGrx */@keyframes button-bounce {

Note that the stiffness of the form-fly-up animation has been increased to give it a harder impact, which emphasises the motion of the button more.

Fifth Iteration — Animation Smear

In this next iteration I’m stretching out the entire form while it’s moving (see the video in the caption for a slowed down version), to simulate a motion blur. This is called an animation smear and is not directly from Disney’s twelve principles, but is nonetheless a common and useful trick used in hand drawn animation to reduce the number of frames required to convey a motion. This tumblr blog is dedicated to collecting and displaying still frames of animation smears, and it really showcases the craftsmanship that can go into creating this effect.

Note in the code below that we’ve changed the transform origin of the form to be at the top instead of the default center, so that it stretches away from the direction of the motion.

.form {

transform-origin: 50% 0;

animation: form-fly-up 1s linear;

} .button {

animation: button-bounce 1s 0.12s linear;

}

form-fly-up {

…

} /* Generated with Bounce.js. Edit at http://goo.gl/dvi8wI */ @keyframes form-fly-up {

button-bounce {

…

} /* Generated with Bounce.js. Edit at http://goo.gl/sNmGrx */ @keyframes button-bounce {

Now, since our computer already does all of the drawing, my added smear doesn’t really serve the purpose I described above. However, smears can still be used for the artistic effect, or for the exaggeration of a motion, which is the reason for using it here. This actually leads us back to the twelve basic animation principles again, since exaggeration is one of them.

Final Iteration — Squash and Stretch

In this final iteration of the animation, I’ve used what is described to be “by far the most important” of Disney’s twelve principles — Squash and Stretch. This principle is used to give a sense of weight and flexibility to objects. A classic example of this is a bouncing ball compressing as it hits the ground and then extending as it bounces up again:

To get the desired effect on our signup form, it’s important to try to maintain the overall volume as it squashes together on its impact.

.form {

transform-origin: 50% 0;

animation: form-fly-up 1.29s linear;

} .button {

animation: button-bounce 1s 0.12s linear;

}

form-fly-up {

…

} /* Generated with Bounce.js. Edit at http://goo.gl/G1h7Qa */ @keyframes form-fly-up {

button-bounce {

…

} /* Generated with Bounce.js. Edit at http://goo.gl/sNmGrx */ @keyframes button-bounce {

Now that we’ve reached the final version of the animation, I’m sure you’ll agree that I’ve made it look very cartoony, which might not necessarily be the look you are going for. Keep in mind however that I’ve opted for a more extreme portrayal of the different principles just to make the point clearer. All of the principles described above can be used in a more modest manner to get something that fits better with the rest of your style.