How to animate "from" in Web Animation API

Question

Web Animation API supports keyframe animation, so you can go "from" and "to":

// Go from 0 to 300px
someElement.animate(
[
  { transform: 'translateY(0)' },
  { transform: 'translateY(300px)' }   
], {
  duration: 1000
});

Is there some way to go "to" without having to specify "from"? Something like:

// Go from the current position to 300px
someElement.animate({ transform: 'translateY(300px)' }, {
  duration: 1000
});

Or I must store the current position somewhere else?

Answer 1

You can set transform property before to start the animation. Also, you can use <animatable/> WebComponent to modify and reset the value from start and finish events:

• HTML:

<animatable-component delay="1000" duration="800" animation="slideInUp" easing="ease-in-out">
  <h1>Hello World</h1>
</animatable-component>

• JS:

const animatableElement = document.querySelector('animatable-component')
animatableElement.addEventListener("start", function(event) {
  console.log('ANIMATION START', event);
  var startTransform = 'translateY(0px)'
  event.detail.style.transform = startTransform;
  event.detail.style.webkitTransform = startTransform;
});

animatableElement.addEventListener("finish", function(event) {
  console.log('ANIMATION FINISH', event);
  var endTransform = 'translateY(300px)'
  event.detail.style.transform = endTransform;
  event.detail.style.webkitTransform = endTransform;
});

More details here