<html>

<head>
  <title> Animating Shapes</title>

  <!--  --------- IMPORTED LIBRARIES  ------>


  <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>

</head>

<body>

  <a-scene>
    <!-- Creating scene -->


    <!--  --------- SKY  --------- -->

    <a-sky id="background-img" color="#EBEBEB"></a-sky>


    <!--  --------- GROUND  --------- -->

    <a-plane id="ground" color="#000000" position="0 0 0" rotation="-90 0 0" width="10" lenght="10"></a-plane>

    <!--  --------- SHAPES  --------- -->


    <a-entity position="1 0.7 0" material="color:navy; transparency:true; opacity:0.7" geometry="primitive: ring; radiusOuter: 0.7; radiusInner: 0.25;" position="-1 0.7 0">

      <a-animation attribute="position" from="0 0.5 -3" to="0 3 -2" direction="alternate" repeat="indefinite"></a-animation>
      <!--By making the animation a child of the shape you make sure this is the element afect by it.
You choose an attribute to animate and "say" how does the animation start (from) and how it ends (to)
By making the direction alternate, you make sure it dgoes back and forth, and making repetition indefinite is the same thing as saying it's on loop
          
This is the most common way to create an animation-->

    </a-entity>


    <a-ring position="-1 0.7 0" color="teal" radius-inner="0.25" radius-outer="0.7">

      <a-animation attribute="material.opacity" from="0" to="0.5" direction="alternate" repeat="3"></a-animation>
      <!--This will happen only 3 times, and then the ring will disappear because the from (initial) state is opacity=0 -->
    </a-ring>

    <!--Since there are some properties that belong to components, you sometimes have to call  componentName.property

animation documentation: https://aframe.io/docs/master/core/animations.html
-->

    
     <a-box position="2 0.7 0" color="tomato" depth="1" height="1" width="1">

      <a-animation attribute="rotation" from="0 0 0" to="360 180 0" dur="2000" direction="alternate" begin="mouseenter" end="mouseleave "repeat="10"></a-animation>
      <!--
Duration and delay are two other properties of the animation that can help you create a more complex one 

You can have animations triggered by events and stopped by events as well
Place gaze cursor on box to begin animation, and leave the box to stop it -->
    </a-box>
    <!--  --------- CAMERA AND CURSOR  --------- -->


    <a-camera look-controls-enabled wasd-controls-enabled position="0 0 3">


      <a-cursor position="0 0 -3" geometry="primitive: ring; radiusOuter: 0.030; radiusInner: 0.020;" material="color: #11d8c4; shader: flat" fuse="true" timeout="10">
      </a-cursor>

    </a-camera>


  </a-scene>
  <!-- Closing scene -->

</body>

</html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.