Control animation on the a-frame-alongpath-component

Question

The problem is autoplay-animation that I want to disable at the start.

I thought why not to start this sentence

AFRAME.registerComponent('track1', { <

The code is getting messy and Im trying to figure out both functions 'remove' and ´play' on the #track1.

Clicking on the "animate button" sets function 'play' on the #track1.

The code 'triggers:a-curve-point' inside the aframe-along-component.js always trigger the animation so soon a curve is established like #track1.

AFRAME.registerComponent('alongpath', {

//dependencies: ['curve'],

schema: {
    curve: {default: ''},
    triggers: {default: 'a-curve-point'},
    triggerRadius: {type: 'number', default: 0.01},
    dur: {default: 1000},
    delay: {default: 0},
    loop: {default: false},
    rotate: {default: false},
    resetonplay: {default:true}
},

init: function () { <

The link to Glitch

Welcome to StackOverflow! Help us help you: Please read stackoverflow.com/help/minimal-reproducible-example on how to create a minimal reproducible example and read stackoverflow.com/help/how-to-ask to improve your question. — wuerfelfreak
Thanks. I think I did everything. It looks like that along-path-component is not really suitable for controlling an animation. I even removed the animation code though it triggers anything automatically (the code is "triggers: a-point-curve;" once two points are created). Otherwise one has to modify build.js from scratch. I'm not capable of that. I could modify the SVG animation from AnimeJS by adding "autoplay:false" and voila! I will close the question in a few days. — Tomas Maldonis
One idea I have is aframe.io/docs/1.1.0/core/…. Disable or pause the component "track1". — Tomas Maldonis

Piotr Adam Milewski Piotr Adam Milewski · Accepted Answer · 2021-01-05T06:56:06

although it would be best to extend the alongpath component with some flow control, you can achieve a play / stop / reset functionality without it.

add the component dynamically to simulate play()

call its .reset() method to reset the animation:

AFRAME.registerComponent("track1", {
  init: function() {
    var box = document.querySelector("a-box");
    document.querySelector(".enter").addEventListener("click", e => {

      if (box.components.alongpath) {
        // if the component is attached - reset
        box.components.alongpath.reset();
      } else {
        // otherwise attach it
        box.setAttribute("alongpath", "curve", "#track1");
      }
    });
  }
});

Check it out here (click the fish to see the source).

Control animation on the a-frame-alongpath-component

1 Answers