A-frame position animation passing in data as second argument - aframe

Question

I am trying to get an animation to move the camera from the current position, to a position passed from the element clicked. The issue seems to be in proper syntax for passing the 'to' position into an animation. Here is what I have.
<a-entity id="cam-position" position="0 0 1.2" rotation="-0 0 0">
<a-camera look-controls wasd-controls>
<a-entity visible="true" cursor="fuse: true; fuse-timeout: 500"
position="0 0 -1"
scale="0.01 0.01 0.01"
geometry="primitive: sphere"
material="color: #6AD7FF; shader: standard">
<a-animation begin="click"
easing="ease-in"
attribute="scale"
dur="2000"
fill="backwards"
from="0.01 0.01 0.01" to="0.04 0.04 0.04">
</a-animation>
<a-animation begin="fusing"
easing="ease-in"
attribute="scale"
fill="forwards"
from="1 1 1" to="0.1 0.1 0.1" >
</a-animation>
</a-entity>
</a-camera>
<a-animation begin="move"
attribute="position"
dur="2000"
from="0 0 1.2"
>
</a-animation>
</a-entity>
document.querySelector('#cam-position').emit('move',{'to': { x: 0, y: 0, z: -88 } });
It works fine without the second argument and the 'to' specified in the a-animation. Any ideas? Thanks

Answer 1

When you are emitting move, the second argument is the event detail. Animations do have a feature to start an animation on an event trigger, but it doesn't look at the event detail.
You'd need to do a animation.setAttribute('to', {...}) rather than trying to have an event handle everything since that's not a feature.
document.querySelector('a-animation[begin="move"]').setAttribute('to', '0 0 -88');
document.querySelector('#cam-position').emit('move')