<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animation: Unfold</title>
<meta name="description" content="Animation: Unfold - A-Frame">
<script src="../../../dist/aframe-master.js"></script>
</head>
<body>
<a-scene background="color: #ECECEC">
<a-assets>
<a-mixin id="board" geometry="depth: .05; height: 1; width: 6" material="shader: flat" pivot="0 0.5 0" position="0 -1 0"></a-mixin>
<a-mixin id="unhinge" animation="property: rotation; to: 0 0 0; dur: 1000"></a-mixin>
<img id="shadow" src="../../assets/img/radial-shadow-2.png">
</a-assets>
<!-- Series of nested boards that unfold one by one. -->
<a-entity position="0 3 -8" scale="1 1 1"
animation__position="attribute: position; to: 0 5 -8; dur: 2000"
animation__rotation="property: rotation; from: 0 60 0; to: 0 30 0; dur: 2500">
<!-- Pivot and position are used to set the "hinge" of each board to it's top edge. -->
<a-box mixin="board unhinge" color="#F16745" rotation="-20 0 0" animation="delay: 1000">
<a-box mixin="board unhinge" color="#FFC65D" rotation="-175 0 0" animation="delay: 250">
<a-box mixin="board unhinge" color="#7BC8A4" rotation="-180 0 0" animation="delay: 500">
<a-box mixin="board unhinge" color="#4CC3D9" rotation="-180 0 0" animation="delay: 750">
<a-box mixin="board unhinge" color="#93648D" rotation="-180 0 0" animation="delay: 1000">
</a-box>
</a-box>
</a-box>
</a-box>
</a-entity>
<a-image position="0 -1 0" src="#shadow" rotation="-90 0 0" scale="6 6 6"></a-image>
<a-light type="directional" color="#fff" intensity="0.2" position="-1 2 1"></a-light>
<a-light type="ambient" color="#fff"></a-light>
</a-scene>
</body>
</html>
