An introduction to easing in/out methods

In order to learn easing in and easing out methods, we had to use given sprites and create two animations from it. Once the two animations done, I decided to use the learned easing methods and join both animations into a single one. You can switch from one to another with the left/right buttons.

The first step was to correctly position each sprites, then animate them with translations and rotations. We then learned and applied easing methods to give this more "natural" feeling and avoiding linear moves. TweenMax libraries were used.

My involvement in this project mainly included web integration, and JavaScript programmation.

Tools used:

  • FileZilla
  • Notepad++
  • CodePen

The animation:


Fully handcrafted by Julien Beillon

Back to the top