CODEWITHSUNDEEP
javascripthtmlcssanimationaframe
Aidan Young
Aidan Young

Reputation: 102

Multiple animations in A-frame

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?

Upvotes: 1

Views: 276

Answers (1)

Piotr Kolecki
Piotr Kolecki

Reputation: 380

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

Upvotes: 2

Related Questions