CSS Custom Properties + JS Animations = 🔥

CSS Custom Properties kick the maintainability of our JS-based animations into the stratosphere! 🚀

When creating JavaScript-based animations that affect elements in the DOM, it is almost guaranteed that we will be modifying style properties inside our animation loop. For many of us, this would look something like the following:

let xPos = 0;
 
function animate(timestamp) {
  xPos += 10;
 
  circle.style.transform = `translate3d(${xPos}px, 0, 0)`;
 
  …