How can I animate/change the color of a torus in a-frame?

Question

I am learning how to use a-frame so that I can begin diving into AR technologies. I am following a tutorial online about animating color but I am not sure if the tutorial showed me the correct way to do it as nothing appears to be animating.

I have already looked through his code in the tutorial and attempted to look at the a-frame -> a-animation documentation but still haven't had any luck

<a-scene>
    <a-torus position="-2 1 -5" color="green" radius="1.2">
        <a-animation attribute="color" 
            from="green" 
            to="red"
            dur="100"
            repeat="indefinite"
        ></a-animation>
    </a-torus>
    <a-sky color="#ECECEC"></a-sky>
</a-scene>

It is supposed to cycle between the colors but I feel like I have been looking at this torus for minutes now and still haven't seen a difference.

Answer 1

The <a-animation> element is deprecated since aframe 0.9.0. The animation entity was made into a component.

Its pretty well documented here, in your case, it would be:

<a-torus position="-2 1 -5" color="green" radius="1.2" 
      animation="property: components.material.material.color;
                 type: color;
                 to: blue;
                 dur: 500;
                 dir: alternate;
                 loop: true"></a-torus>

Check it out:

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<a-scene>
  <a-torus position="-2 1 -5" color="green" radius="1.2" 
           animation="property: components.material.material.color;
                      type: color;
                      to: blue;
                      dur: 500;
                      dir: alternate;
                      loop: true">
  </a-torus>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

---

You can also use hex values - just replace 0x with # (ie: 0xff00aa -> #ff00aa):

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<a-scene>
  <a-torus position="-2 1 -5" color="#ff0000" radius="1.2" 
           animation="property: color;
                      type: color;
                      to: #0000ff;
                      dur: 500;
                      easing: linear;
                      dir: alternate;
                      loop: true">
  </a-torus>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>