Build Reactive Websites with RxJS

Animating Objects

The term animation covers a whole host of topics, but this section is concerned just with the subcategory of animation that details ‘the process by which an object moves from point A to point B’. This type of animation is known as a ‘tween’ (since an object is moving between two points). The simplest possible tween consists of an element to move, the element’s current location as a start point, an end point, and the amount of time the animation will take. Modeled in RxJS, it looks something like this:

vanilla/canvasAnimation/simpleTween-complete.ts

function simpleTween(element, endPoint, durationSec) {
  // Convert duration to 60 frames per second
  let durationInFrames = 60 * durationSec;
  let distancePerStep = endPoint ...