<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="UTF-8">
<head>
    <script src="../../build/player/bodymovin.js"></script>
    <style>
        body{
            font-family: sans-serif;
            color: #ff9f57;
            font-weight: bold;
        }
        .controllers{
            margin-top: 30px;
            text-align: center;
        }

        label{
            cursor: pointer;
        }
        input{
            padding: 10px 0;
        }

    </style>
</head>
<body style="background-color:#666; margin: 0;height: 100%">
<div style="width:100%;height:600px;background-color:#fff;margin:auto" class="bodymovin" data-animation-path="anim" data-bm-player="0" data-anim-type="svg" data-anim-loop="true"></div>
<div class="controllers">
<input type="checkbox" id="subframeToggle" value="subframe"><label for="subframeToggle">Enable subframe rendering</label><br />
<input type="range" name="speed" min="0.01" max="2" value="1" step="0.01" id="speedRange" onChange="updateSpeed(this.speed)"  onInput="updateSpeed(this.speed)"><br />
    <div>Current animation speed: <span id="currentSpeed"></span></div>

</div>
<script>
    var subframeToggle = document.getElementById('subframeToggle');
    subframeToggle.addEventListener('change',function(){
        bodymovin.setSubframeRendering(subframeToggle.checked);
    });
    var speedRange = document.getElementById('speedRange');
    function updateSpeed(val){
        currentSpeed.innerHTML = speedRange.value;
        bodymovin.setSpeed(speedRange.value);
    }
    var currentSpeed = document.getElementById('currentSpeed');
    currentSpeed.innerHTML = speedRange.value;
    bodymovin.setSpeed(speedRange.value);
</script>
</body>
</html>