Update CSS Variables with JavaScript

CSS Variables are not only updated using the cascade and inheritance, you can also read and write (or get and set) CSS variable values from your JavaScript.

setProperty() – gets the value of a custom property.
getPropertyValue() – sets the value of a custom property.

You use the variables --pos-x and --pos-y in the CSS file:

.ball {
  transform: translate( calc(var(--pos-x) * 1px), calc(var(--pos-y) * 1px) );
  transition: 0.85s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

  And you set them inside the JavaScript code:

const body = document.querySelector('body');
const ball = document.querySelector('.ball');

body.addEventListener('click', e => {
  ball.style.setProperty('--pos-x', e.clientX - 80);
  ball.style.setProperty('--pos-y', e.clientY - 80);
});