<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="UTF-8">
<head>
    <style>
        body{
            background-color:#ccc;
            margin: 0px;
            height: 100%;
            overflow: hidden;
        }
        #bodymovin{
            background-color:#000;
            width:1000px;
            height:500px;
            /*width:800px;
            height:500px;*/
            display:block;
            overflow: hidden;
            transform: translate3d(0,0,0);
            margin: auto;
            opacity: 1;
        }

        rect{
           /* opacity: .5!important;*/
        }

        svg{
            /*border: 1px solid red;*/
        }

         .rbt-black{
            font-weight: 900;
            font-family: 'Roboto', sans-serif;
        }

        .strokeClase1, .fillClase1{
            fill: red;
            stroke:aquamarine;
            stroke-opacity: 0;;
        }

    </style>
    <!-- build:js bodymovin.js -->
     <script src="js/main.js"></script>
    <script src="js/utils/common.js"></script>
    <script src="js/3rd_party/transformation-matrix.js"></script>
    <script src="js/3rd_party/seedrandom.js"></script>
    <script src="js/3rd_party/BezierEaser.js"></script>
    <script src="js/utils/MatrixManager.js"></script>
    <script src="js/utils/animationFramePolyFill.js"></script>
    <script src="js/utils/functionExtensions.js"></script>
    <script src="js/utils/bez.js"></script>
    <script src="js/utils/DataManager.js"></script>
    <script src="js/utils/FontManager.js"></script>
    <script src="js/utils/PropertyFactory.js"></script>
    <script src="js/utils/shapes/ShapeProperty.js"></script>
    <script src="js/utils/shapes/ShapeModifiers.js"></script>
    <script src="js/utils/shapes/TrimModifier.js"></script>
    <script src="js/utils/shapes/RoundCornersModifier.js"></script>
    <script src="js/renderers/SVGRenderer.js"></script>
    <script src="js/renderers/CanvasRenderer.js"></script>
    <script src="js/renderers/HybridRenderer.js"></script>
    <script src="js/mask.js"></script>
    <script src="js/elements/BaseElement.js"></script>
    <script src="js/elements/svgElements/SVGBaseElement.js"></script>
    <script src="js/elements/TextElement.js"></script>
    <script src="js/elements/svgElements/SVGTextElement.js"></script>
    <script src="js/elements/PlaceHolderElement.js"></script>
    <script src="js/elements/CompElement.js"></script>
    <script src="js/elements/ImageElement.js"></script>
    <script src="js/elements/ShapeElement.js"></script>
    <script src="js/elements/SolidElement.js"></script>
    <script src="js/elements/canvasElements/CVBaseElement.js"></script>
    <script src="js/elements/canvasElements/CVCompElement.js"></script>
    <script src="js/elements/canvasElements/CVImageElement.js"></script>
    <script src="js/elements/canvasElements/CVMaskElement.js"></script>
    <script src="js/elements/canvasElements/CVShapeElement.js"></script>
    <script src="js/elements/canvasElements/CVSolidElement.js"></script>
    <script src="js/elements/canvasElements/CVTextElement.js"></script>
    <script src="js/elements/htmlElements/HBaseElement.js"></script>
    <script src="js/elements/htmlElements/HSolidElement.js"></script>
    <script src="js/elements/htmlElements/HCompElement.js"></script>
    <script src="js/elements/htmlElements/HShapeElement.js"></script>
    <script src="js/elements/htmlElements/HTextElement.js"></script>
    <script src="js/elements/htmlElements/HImageElement.js"></script>
    <script src="js/elements/htmlElements/HCameraElement.js"></script>
    <script src="js/animation/AnimationManager.js"></script>
    <script src="js/animation/AnimationItem.js"></script>
    <!-- Expressions -->
    <script src="js/utils/expressions/Expressions.js"></script>
    <script src="js/utils/expressions/ExpressionPropertyDecorator.js"></script>
    <script src="js/utils/expressions/ExpressionManager.js"></script>
    <script src="js/utils/expressions/ShapeInterface.js"></script>
    <script src="js/utils/expressions/LayerInterface.js"></script>
    <script src="js/utils/expressions/CompInterface.js"></script>
    <script src="js/effects/SliderEffect.js"></script>
    <script src="js/effects.js"></script>
    <!-- end Expressions -->
    <!-- endbuild -->
    <script src="js/module.js"></script>
    <!-- <script src="bodymovin.js"></script> -->
    <!-- <script src="bodymovin_light.js"></script> -->
</head>
<body>
<div id="bodymovin"></div>

<script>

    var count = 0;
    var animData = {
        container: document.getElementById('bodymovin'),
        renderer: 'html',
        loop: true,
        prerender: false,
        autoplay: true,
        autoloadSegments: true,
        //animationData: anim2
        path: 'exports/murally/data.json'
    };

    var anim;

    anim = bodymovin.loadAnimation(animData);

    /*function reposition(){
        //anim.animationData.layers[0].layers[0].ks.p.k[0].s = [200,200,0];
        //anim.animationData.layers[0].layers[0].ks.p.k[0].e = [200,200,0];
    }

    var hand;
    var initX,initY,handX,handY;

    function handMove(ev){
        var currentX = ev.clientX;
        var currentY = ev.clientY;
        anim.animationData.layers[0].layers[0].ks.p.k[0].s[0] = handX + (currentX - initX);
        anim.animationData.layers[0].layers[0].ks.p.k[0].e[0] = handX + (currentX - initX);
        anim.animationData.layers[0].layers[0].ks.p.k[0].s[1] = handY + (currentY - initY);
        anim.animationData.layers[0].layers[0].ks.p.k[0].e[1] = handY + (currentY - initY);
    }

    function handUp(ev){
        document.removeEventListener('mousemove',handMove);
        document.removeEventListener('mouseup',handUp);
    }

    function handDown(ev){
        document.addEventListener('mousemove',handMove);
        document.addEventListener('mouseup',handUp);
        initX = ev.clientX;
        initY = ev.clientY;
        handX = anim.animationData.layers[0].layers[0].ks.p.k[0].s[0];
        handY = anim.animationData.layers[0].layers[0].ks.p.k[0].s[1];
    }

    function init(){
        hand = document.getElementById('hand');
        hand.addEventListener('mousedown',handDown);
        setTimeout(reposition,2000);
    }
    anim.addEventListener('DOMLoaded',init);*/

</script>
</body>
</html>