Ytukyg

I would like to implement an animation motion path that is launched by an cursor onclick event.

I understand one way of doing this is using anime.js with Aframe but I don't know how to import it into Aframe.

Below is the code of the animation sequence I want to animate. As you can see the animation tags follow a takeoff and landing animation sequence.
But because I want the model to animate onclick this process is not suitable

Appreciate any help!

 <a-entity id="spaceship" cursor-animator gltf-model=#lol position="-20 0 -5" scale="2 2 2" rotation="0 180 0">

        <a-animation attribute="position" from="-20 0 -5" to="-20 0 -25" dur="5000"></a-animation>

        <a-animation attribute="position" from="-20 0 -25" to="-20 1000 -200" delay="5000" dur="9000"></a-animation>

        <a-animation attribute="rotation" from="0 180 0" to="0 0 0" delay="14000"></a-animation>

        <a-animation attribute="position" from="-20 1000 -200" to="-20 0 -25"  delay="15000" dur="9000"></a-animation>

        <a-animation attribute="position" from="-20 0 -25" to="-20 0 -5" delay="24000" dur="8000"></a-animation>

        <a-animation attribute="rotation" from="0 0 0" to="0 180 0" delay="25000" dur="8000"></a-animation> 

    </a-entity> 

The path component could potentially help:
https://github.com/protyze/aframe-alongpath-component

It doesn't look like it has a trigger event, so what you could do is

setAttribute('alongpath', {curve: '#track1'}) in your click event to make it start at that time.

<a-curve id="track1">

  <a-curve-point position="-2 2 -3"></a-curve-point>

  <a-curve-point position="0 1 -3"></a-curve-point>

  <a-curve-point position="2 2 -3"></a-curve-point>

</a-curve>



<!-- this would move once you add the component via setAttribute in the click function -->

<a-box></a-box>