Animation controlled by JavaScript

a sliding block controlled by mouse

Introduction

Nowadays, more and more animation is applied on Front-end. It’s interesting to understand how JavaScript controls the animation.

  • how to build a timeline
  • how to build an animation
  • how to control a timeline (pause / resume)

Animation in browser

Animation is a method in which frames are manipulated to appear as moving images. In browser, we can write a function to move images, and call this function repeatedly to achieve animation.

let timerId = setInterval(() => alert('tick'), 16);
let timerId = setTimeout(function tick() {   
alert('tick');
timerId = setTimeout(tick, 16);
}, 16);
  1. Delay (16ms) is applied precisely.
let delay = 16;
let timerId = setTimeout(function tick() {
alert('tick');
if (some-condition) delay += 16; // delay is updated
timerId = setTimeout(tick, delay);
}, delay);
let tick = () => { requestAnimationFrame(tick) };cancelAnimationFrame(tick); // cancel the tick animation

Timeline

Timeline is the class which controls the animation. Its attributes are:

  • timelineStart : the start time of the timeline (it’s NOT the start time of animation)
  • pauseStart & pausedTime : the start time of the pause & the duration of the pause in the timeline
  • animations : all the animation in the timeline. They are saved in a Set .
  • animationStart : the time of registration of each animation in timeline. They are saved in a Map . The key is animation , value is the time.
const ANIMATIONS = Symbol('animations');export class Timeline { 
constructor() { this[ANIMATIONS] = new Set(); }
}
  • pause : note the pauseStart time, and cancel the current animation
  • resume : calculate the duration of pause, and start the animation
  • add : register an animation, and save the time of registration.
this[TICK_HANDLER] = requestAnimationFrame(this[TICK]);
cancelAnimationFrame(this[TICK_HANDLER]);
  • If the animation is registered after the timeline start, then the time of animation is now — animationStart

Animation

In browser, the animation is created by CSS. In the exemple, sliding block controlled by mouse, the animation is controlled by transform

transform: translateX(20px)
  • template : the function that returns the value of property , for example, pos => `translateX(${pos})`
  • startValue & endValue & duration : these are the parameters of animation. Combine these value with time, the position of block can be calculated.
  • delay : the time of delay, used in timeline
  • timingfn : The timing function controls the effect of animation, such as linear, ease, ease-in, …

Timeline control

Since Timeline and Animation have been created, animation can be controlled now.

Conclusion

In this article, I presented how to control the animation using JavaScript. The main idea is create a timeline, which can maintain several animation, and the animation can modify the CSS of HTML element. The most important part of this little project is how to calculate the position of HTML element with the animation time.

npm initnpm install --save-dev webpack webpack-cli webpack-dev-servernpm install --save-dev babel-loader @babel/core @babel/preset-env

Developper in Paris, interested in Big Front-end, Full Stack, Explainable AI. Try to introduce AI into Full Stack workflow