Data Visualization with D3 and AngularJS

Realistic animations with easing

Until now, we animated all attribute changes with the same time step size. However, all physical realistic animations are accelerated or decelerated; therefore, the animation over time is not linear anymore. If we want to create plausible and realistic animations, we have to adapt the linear step size with a nonlinear easing function.

Easing functions describe the change of a value over time, where value is the property that we want to animate. Let's imagine the transition of a ball from position 0 (left-hand side) to position 1 (right-hand side), the ball moves from left to right. If the ball moves with a constant speed from left to right, we call it a linear transition (or linear easing).

We can also visualize ...