0

I am creating a scene in A-frame and I'm wondering how I can create something where when a function called myFunction() occurs, an animation will start. How can this be done? Current code:

<html>
  <head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
     <a-box position="-1 1.6 -5" animation="property: position; to: 1 8 -10; dur: 2000; easing: linear; loop: true" color="tomato"></a-box>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>
Mugen87
  • 28,829
  • 4
  • 27
  • 50
Aidan Young
  • 554
  • 4
  • 15

1 Answers1

0
  • You would want to use the startEvents in the animation attribute
animation="startEvents: event-name; property: position; to: 1 8 -10; dur: 2000; easing: linear; loop: true"
  • add a class or id to your element so your function could identify the element you want to animate on command
<a-box class="class_name" position="-1 1.6 -5" animation="startEvents: event-name; property: position; to: 1 8 -10; dur: 2000; easing: linear; loop: true" color="tomato"></a-box>
  • emit the startEvent by its name in the function
function animateBox() {
  document.querySelector('.class_name').emit('event-name');
}
CartesiusMustache
  • 76
  • 4