Give Animation Life

Original author: Joel Besada
  • Transfer
  • Tutorial
I love animation. That is why the Bounce.js library was created , a tool for creating beautiful animations. In this article I will show examples of using Bounce.js, as well as some classic ways of animation. Let's start with the boring Tictail login form .

1. Simplicity




The first example is a simple CSS3 animation with two keys:

.form {
   animation: form-fly-up 0.35s ease;
}
@keyframes form-fly-up {
   0% { transform: translateY(500px); }
   100% { transform: translateY(0); }
}


Here I use a function that slows down the appearance of a form at the end of its movement. Perhaps this example is the simplest that you can create, and not very beautiful. The movements of the form look unnatural and unnatural (which, in essence, is the same :)).

2. Bounce back




To add elegance to our form, add a new key to it, upon execution of which the form will slightly fall down:

.form {
   animation: form-fly-up 0.45s ease;
}
@keyframes form-fly-up {
   0% { transform: translateY(500px); }
   50% { transform: translateY(-50px); }
   100% { transform: translateY(0); }
}


Our form is a little prettier, but still remains awkward. I can sit for hours and select the necessary parameters, but what can be done to give the form real physics of motion? That's what we will use Bounce.js for !

3. Physics of movements




Here I used the animation that Bounce.js generated. It may seem easy, but it is in every way better and more pleasant in visual presentation!

.form {
   animation: form-fly-up 1s linear;
}
/* Сделано с Bounce.js. Просмотрите тут: http://goo.gl/AUAzKV */ 
@keyframes form-fly-up {
   …
}


I use the standard jump , which is based on a simplified vibration model .


Now let's think about other ways to improve our shape. A good source of inspiration here is an animated cartoon, the concept of which we will take for work.

The Twelve Principles of Disney Animation is a set of principles for creating more realistic animated movements based on the best Disney animators in the golden age of cinema . These principles have been described in Illusions of Life: Disney Animation, which is the foundation of modern animation. Let's try to learn some principles and apply them in practice.

4. Completion and replay




Completion and repetition are two related techniques that create a sense of compliance with the laws of physics. They show that different parts of an object can move at different speeds and slow down in different ways.

In our example, you may notice that some parts of the form button move after the form has stopped, that is, it does not depend on the main object. This creates the illusion of the non-integrity of the form.

.form {
   animation: form-fly-up 1s linear;
}
.button {
   animation: button-bounce 1s 0.12s linear;
}
/* Сделано в Bounce.js. Смотрите здесь: http://goo.gl/TvjpS6 */
@keyframes form-fly-up {
   …
}
/* Сделано в Bounce.js. Смотрите здесь: http://goo.gl/sNmGrx */
@keyframes button-bounce {
   …
}


Note that the rigidity of the animation is increased to create the effect of different speeds of the shape objects.

5. Drop animation




In this example, we will create a blur effect. This principle is not Disney, but it has been actively applied in the animation of hand-drawn cartoons. This Tumblr blog is dedicated to examples of this effect.

.form {
   transform-origin: 50% 0;
   animation: form-fly-up 1s linear;
}
.button {
   animation: button-bounce 1s 0.12s linear;
}
/* Сделано в Bounce.js. Смотрите здесь: http://goo.gl/dvi8wI */
@keyframes form-fly-up {
   …
}
/* Сделано в Bounce.js. Смотрите здесь: http://goo.gl/sNmGrx */
@keyframes button-bounce {
   …
}


Total. Sprain




In this example, I used what can be called the “most important” of Disney's twelve principles —  stretching . This method is used to make the object heavier and smoother. A classic example of an effect is a ball falling and bouncing off the ground:



.form {
   transform-origin: 50% 0;
   animation: form-fly-up 1.29s linear;
}
.button {
   animation: button-bounce 1s 0.12s linear;
}
/* Сделано в Bounce.js. Смотрите здесь: http://goo.gl/G1h7Qa */
@keyframes form-fly-up {
   …
}
/* Сделано в Bounce.js. Смотрите здесь: http://goo.gl/sNmGrx */
@keyframes button-bounce {
   …
}


I believe that the form we received may not represent what you expected. Note that you can add other effects and principles to this example.

Also popular now: