Multiple animations in A-frame

Question

I was wondering how it would be possible to take a gltf model in a-frame and make an animation so that the model glides 5 spaces to the left, then immediately after 5 spaces forwards. This is my code so far:

<a-gltf-model color="#FFFFFF" width="1" height="1" depth="1"
                   position="0 0 0"
                   scale="8.03 8.03 8.03"
                   src="https://cdn.glitch.com/18a85eac-a71c-4578-ad89-80f59b3a68c3%2Fscene%20(94).glb?v=1619466136777">
      <a-animation attribute="position" repeat="indefinite" to="0 0 15" delay="5000"></a-animation_2>
             
   <a-animation attribute="position" repeat="indefinite" to="15 0 0" delay="10000"></a-animation>
            </a-a-gltf-model>

I cant seem to get the animations to proceed one after the other. How would I achieve this?

Piotr Kolecki · Accepted Answer · 2021-04-26 21:12:04Z

I strongly recommend you read this documentation page Animation - A-Frame

Working example:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
        <style>
        
        </style>
    </head>
    <body>
        <a-scene>
        <a-sphere
            color="red"
            animation__position1="
                property: position;
                from: 0 0 0;
                to: 0 0 -5;
                dur: 5000;
                easing: linear;
                autoplay: true;"
            animation__position2="
                property: position;
                from: 0 0 -5;
                to: 5 0 -5;
                dur: 5000;
                easing: linear;
                startEvents: animationcomplete__position1">
        </a-sphere>
        </a-scene>
    </body>
</html>

You can use startEvents to call animations or use delay and duration attributes

Collectives™ on Stack Overflow

Multiple animations in A-frame

1 Answer 1

Working example:

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Working example:

Comments

Related