Animation controlled by JavaScript

Image for post
Image for post
a sliding block controlled by mouse

Introduction

Animation in browser

let timerId = setInterval(() => alert('tick'), 16);
let timerId = setTimeout(function tick() {   
alert('tick');
timerId = setTimeout(tick, 16);
}, 16);
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

const ANIMATIONS = Symbol('animations');export class Timeline { 
constructor() { this[ANIMATIONS] = new Set(); }
}
this[TICK_HANDLER] = requestAnimationFrame(this[TICK]);
cancelAnimationFrame(this[TICK_HANDLER]);

Animation

transform: translateX(20px)

Timeline control

Conclusion

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store