Animation does not work for cube and torus

[imperatormatthias]

MDN URL

https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame

What specific section or headline is this issue about?

Animation

What information was incorrect, unhelpful, or incomplete?

The instructions on how to animate the cube and torus

What did you expect to see?

Expected animation of the cube and torus by following the given instructions

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

Tried in FF and edge and only the cylinder animates. The link to the file on github here: https://github.com/end3r/MDN-Games-3D/blob/gh-pages/A-Frame/shapes.html also does not display the cube and the torus does not animate.

MDN metadata

Page report details

• Folder: en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame
• MDN URL: https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md
• Last commit: https://github.com/mdn/content/commit/84343b13c08cb4d0420881f6eac315a1c36f8561
• Document last modified: 2024-03-20T18:58:45.000Z

[low-perry]

After reading the A-FRAME docs, for animation, the following changes need to be made:

<!-- 1 -->
<a-box color="#0095DD" rotation="20 40 0" position="0 1 0">
      <a-animation 
      attribute="rotation"
      from="20 0 0" to="20 360 0"
      direction="alternate"
      dur="4000"
      repeat="indefinite"
      easing="ease">
    </a-animation>
</a-box>
<!-- replace code above with the following -->
<a-box color="#0095DD" position="0 1 0" rotation="20 40 0" animation="property: rotation;from:20 0 0; to: 20 360 0;dir: alternate; loop: true; dur: 4000; easing: easeInOutQuad;"></a-box>

<!-- 2 -->
  <a-entity 
  geometry="
  primitive: torus;
  radius: 1;
  radiusTubular: 0.1;
  segmentsTubular: 12;" 
  material="color: #EAEFF2;
  roughness: 0.1;
  metalness: 0.5;"
  rotation="10 0 0"
  position="-3 1 0">
    <a-animation attribute="scale" to="1 0.5 1" direction="alternate" dur="2000" repeat="indefinite" easing="linear"></a-animation>
    </a-entity>

    <!-- replace code above with the following -->
    <a-entity
            geometry="
            primitive: torus;
            radius: 1;
            radiusTubular: 0.1;
            segmentsTubular: 12;"
            material="
            color: #EAEFF2;
            roughness: 0.1;
            metalness: 0.5;"
            rotation="10 0 0"
            position="-3 1 0"
            animation="property: scale; to: 1 0.5 1; dir: alternate; dur: 2000; repeat: true; easing: linear;">
        
      </a-entity>

[imperatormatthias]

This seems to work except for the torus animation property "direction: alternate" should be "dir: alternate" and "repeat: indefinite" should be "loop: true" based on the A-FRAME docs.