Static vs. dynamic animations

This article is a part of my Web Animations article series.

Let us start by discussing the terminology. For this series we want to distinguish animations between two categories:

• static animations
• dynamic animations

Many tutorials and guides address static animations because they are very simple. They just do what you told them to do, without considering any environmental circumstances.

Here is an example:

This box moves exactly 100px to the right when you click it.

There are a lot of use-cases out there where this is totally okay. But in this article series I want you to empower to the “dark arts” of creating dynamic animations.

• With static animations the browser manages every part of the animation. That is great because it’s simple. But on the downside it is less flexible.
• With dynamic animations we take over the control on the animation using JavaScript. This allows us to consider other elements, user interaction and everything we want. We even can create a computer game.

We will also see that there is no black and white. We will make us of mixed up animation techniques to fit our needs.