KIRUPA 🍊

Share this post

CSS Custom Properties + JS Animations = πŸ”₯

www.kirupa.chat

CSS Custom Properties + JS Animations = πŸ”₯

CSS Custom Properties kick the maintainability of our JS-based animations into the stratosphere! πŸš€

KIRUPA 🍊
Jan 28, 2023
βˆ™ Paid
7
2
Share

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)`;
Β 
  …

Keep reading with a 7-day free trial

Subscribe to KIRUPA 🍊 to keep reading this post and get 7 days of free access to the full post archives.

Already a paid subscriber? Sign in
Previous
Next
© 2023 KIRUPA 🍊
Privacy βˆ™ Terms βˆ™ Collection notice
Start WritingGet the app
SubstackΒ is the home for great writing