How do I make an a-frame entity aware that its animation attribute has changed?

Question

I have an <a-box> in aframe with an <a-animation>:

<a-box scale='3 3 3' position='0 3 -8' color=red>
  <a-animation begin=move attribute=position dur=2000 to='10 3 -12'></a-animation>
</a-box>

If I set the to attribute to a new value and then run the animation, it executes the animation using its previous from and to values.

However, if I remove the <a-animation> from the dom and then add it again (with the new to value set), it will now animate using the new value.

Is there a way to set the new to value and then make the the <a-box> / <a-animation> aware that its to value has been updated so that the next time I emit the begin move, it will use the new to attribute?

Answer 1

This animation component should recreate the animation configuration every time any property changes: https://github.com/ngokevin/kframe/tree/master/components/animation . I will be maintaining this animation implementation more than the <a-animation> one that may become deprecated.

<a-box scale='3 3 3' position='0 3 -8' color='red'
       animation__move="startEvents: move; property: position; dur: 2000; to: 10 3 -12"></a-box>

document.querySelector('a-box').setAttribute('animation__move', 'to', '20 20 20');