player/index.html - external/github.com/airbnb/lottie-web - Git at Google

 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <style>
         body, html{
             background-color:#ddd;
             margin: 0px;
             height: 100%;
             overflow-x: hidden;
             overflow-y: auto;
         }

         #bodymovin{
             background-color:#333;
             width:800px;
             height:800px;
             width:1024px;
             height:768px;
             display:block;
             overflow: hidden;
             transform: translate3d(0,0,0);
         }

         .botas_loop_3,.botas_loop_2{
             display:none
         }

     </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/ShapePath.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/utils/shapes/RepeaterModifier.js"></script>
     <script src="js/utils/shapes/MouseModifier.js"></script>
     <script src="js/utils/shapes/ShapeCollection.js"></script>
     <script src="js/utils/imagePreloader.js"></script>
     <script src="js/utils/featureSupport.js"></script>
     <script src="js/utils/filters.js"></script>
     <script src="js/utils/pooling/pooling.js"></script>
     <script src="js/utils/pooling/point_pool.js"></script>
     <script src="js/utils/pooling/shape_pool.js"></script>
     <script src="js/utils/pooling/shapeCollection_pool.js"></script>
     <script src="js/renderers/BaseRenderer.js"></script>
     <script src="js/renderers/SVGRenderer.js"></script>
     <script src="js/renderers/CanvasRenderer.js" data-light-skip="true"></script>
     <script src="js/renderers/HybridRenderer.js" data-light-skip="true"></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/svgElements/effects/SVGTintEffect.js"></script>
     <script src="js/elements/svgElements/effects/SVGFillFilter.js"></script>
     <script src="js/elements/svgElements/effects/SVGStrokeEffect.js"></script>
     <script src="js/elements/svgElements/effects/SVGTritoneFilter.js"></script>
     <script src="js/elements/svgElements/effects/SVGProLevelsFilter.js"></script>
     <script src="js/elements/svgElements/effects/SVGDropShadowEffect.js"></script>
     <script src="js/elements/svgElements/SVGEffects.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" data-light-skip="true"></script>
     <script src="js/elements/canvasElements/CVCompElement.js" data-light-skip="true"></script>
     <script src="js/elements/canvasElements/CVImageElement.js" data-light-skip="true"></script>
     <script src="js/elements/canvasElements/CVMaskElement.js" data-light-skip="true"></script>
     <script src="js/elements/canvasElements/CVShapeElement.js" data-light-skip="true"></script>
     <script src="js/elements/canvasElements/CVSolidElement.js" data-light-skip="true"></script>
     <script src="js/elements/canvasElements/CVTextElement.js" data-light-skip="true"></script>
     <script src="js/elements/htmlElements/HBaseElement.js" data-light-skip="true"></script>
     <script src="js/elements/htmlElements/HSolidElement.js" data-light-skip="true"></script>
     <script src="js/elements/htmlElements/HCompElement.js" data-light-skip="true"></script>
     <script src="js/elements/htmlElements/HShapeElement.js" data-light-skip="true"></script>
     <script src="js/elements/htmlElements/HTextElement.js" data-light-skip="true"></script>
     <script src="js/elements/htmlElements/HImageElement.js" data-light-skip="true"></script>
     <script src="js/elements/htmlElements/HCameraElement.js" data-light-skip="true"></script>
     <script src="js/animation/AnimationManager.js"></script>
     <script src="js/animation/AnimationItem.js"></script>
     <!-- Expressions -->
     <script src="js/utils/expressions/Expressions.js" data-light-skip="true"></script>
     <script src="js/utils/expressions/ExpressionPropertyDecorator.js" data-light-skip="true"></script>
     <script src="js/utils/expressions/ExpressionManager.js" data-light-skip="true"></script>
     <script src="js/utils/expressions/ShapeInterface.js" data-light-skip="true"></script>
     <script src="js/utils/expressions/TextInterface.js" data-light-skip="true"></script>
     <script src="js/utils/expressions/LayerInterface.js" data-light-skip="true"></script>
     <script src="js/utils/expressions/CompInterface.js" data-light-skip="true"></script>
     <script src="js/utils/expressions/TransformInterface.js" data-light-skip="true"></script>
     <script src="js/utils/expressions/ProjectInterface.js" data-light-skip="true"></script>
     <script src="js/utils/expressions/EffectInterface.js" data-light-skip="true"></script>
     <script src="js/utils/expressions/ExpressionValue.js" data-light-skip="true"></script>
     <script src="js/effects/SliderEffect.js" data-light-skip="true"></script>
     <script src="js/effects.js" data-light-skip="true"></script>
     <!-- end Expressions -->
     <!-- endbuild -->
     <script src="js/module.js" data-skip="true"></script>
     <!-- <script src="bodymovin.js"></script> -->
     <!-- <script src="bodymovin_light.js"></script> -->
 </head>
 <body>
 <div id="bodymovin"></div>

 <script>

     var anim;
     var elem = document.getElementById('bodymovin')
     var animData = {
         container: elem,
         renderer: 'canvas',
         loop: true,
         autoplay: true,
         rendererSettings: {
             progressiveLoad:false,
             dpr: 1
         },
         path: 'exports/render/data.json'
     };
     anim = bodymovin.loadAnimation(animData);
     anim.addEventListener('DOMLoaded', function(){
         window.addEventListener('mousemove', function(ev){
             anim.renderer.globalData.mouseCoords.x = ev.offsetX || ev.pageX;
             anim.renderer.globalData.mouseCoords.y = ev.offsetY || ev.pageY;
         })
         createDrawingCanvas();
     })

     function createDrawingCanvas(){

         var canvasW, canvasH;
         var currentAnimFrame = -1;
         var isEven = false;
         var maxOffset = 250;
         var currentOffset = 0;
         var offsetDir = -1;
         var lastSecond = Number.NEGATIVE_INFINITY;
         var xOffset = 0;
         var newSegmentHeight = 40;
         var pairs = [];

         function tick(time){
             ////
                 /*// get svg data
                 var xml = new XMLSerializer().serializeToString(sourceSVG);

                 // make it base64
                 var svg64 = btoa(xml);
                 var b64Start = 'data:image/svg+xml;base64,';

                 // prepend a "header"
                 var image64 = b64Start + svg64;

                 // set it as the source of the img element
                 imgHelper.src = image64;*/
             ////
             isEven = !isEven;
             if(isEven){
                 //canvasCtx.globalCompositeOperation = 'exclusion';
             }else {
                 //canvasCtx.globalCompositeOperation = 'multiply';
             }
             if(offsetDir > 0){
                 currentOffset = currentOffset >= maxOffset ? maxOffset : currentOffset + offsetDir;
             } else {
                 currentOffset = currentOffset <= 0 ? 0 : currentOffset + offsetDir;
             }

             if(anim.currentFrame !== currentAnimFrame){
                 var newPairs = false;
                 if(time - lastSecond > 1000){
                    newPairs = true;
                    pairs.length = 0;
                 }
                 currentAnimFrame = anim.currentFrame;
                 var currentH = 0, currentPair = 0;
                 while(currentH < canvasH){
                     if(newPairs){
                         newSegmentHeight = 2 + Math.round(20*Math.random());
                         if(currentH + newSegmentHeight > canvasH){
                             newSegmentHeight = canvasH - currentH;
                         }
                         xOffset = Math.round(Math.random()*(canvasW - 1));
                         pairs.push([newSegmentHeight, xOffset]);
                     } else {
                         newSegmentHeight = pairs[currentPair][0];
                         xOffset = pairs[currentPair][1];
                         currentPair += 1;
                     }
                     //var xOffset = 1 + Math.round(Math.random()*currentOffset);
                     //xOffset = 0;
                     bufferCanvasCtx.drawImage(source, xOffset, currentH, canvasW - xOffset, newSegmentHeight, 0 , currentH, canvasW - xOffset, newSegmentHeight);
                     bufferCanvasCtx.drawImage(source, 0, currentH, xOffset, newSegmentHeight, canvasW - xOffset , currentH, xOffset, newSegmentHeight);
                     currentH += newSegmentHeight;
                 }
                 canvasCtx.drawImage(bufferCanvas, 0, 0);
                 if(newPairs){
                     lastSecond = time;
                 }
             }

             requestAnimationFrame(tick);
         }

         function elemDownHandler(){
             offsetDir = 2;
         }

         function elemUpHandler(){
             offsetDir = -5;
         }

         var source;
         ///
         var sourceCanvas = elem.getElementsByTagName('canvas')[0];
         sourceCanvas.style.display = 'none';
         source = sourceCanvas;
         canvasW = sourceCanvas.width;
         canvasH = sourceCanvas.height;
         ///
         /*var sourceSVG = elem.getElementsByTagName('svg')[0];
         sourceSVG.style.display = 'none';
         var imgHelper = document.createElement('img');
         source = imgHelper;
         canvasW = 1024;
         canvasH = 768;*/
         ///
         var canvas = document.createElement('canvas');
         var bufferCanvas = document.createElement('canvas');
         var canvasCtx = canvas.getContext('2d');
         var bufferCanvasCtx = bufferCanvas.getContext('2d');
         canvas.width = canvasW;
         canvas.height = canvasH;
         bufferCanvas.width = canvasW;
         bufferCanvas.height = canvasH;
         //canvasCtx.globalCompositeOperation = 'darken';
         elem.appendChild(canvas);
         elem.addEventListener('mousedown', elemDownHandler);
         elem.addEventListener('mouseup', elemUpHandler);
         requestAnimationFrame(tick);


     }

 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<style>
	body, html{
	background-color:#ddd;
	margin: 0px;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	}

	#bodymovin{
	background-color:#333;
	width:800px;
	height:800px;
	width:1024px;
	height:768px;
	display:block;
	overflow: hidden;
	transform: translate3d(0,0,0);
	}

	.botas_loop_3,.botas_loop_2{
	display:none
	}

	</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/ShapePath.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/utils/shapes/RepeaterModifier.js"></script>
	<script src="js/utils/shapes/MouseModifier.js"></script>
	<script src="js/utils/shapes/ShapeCollection.js"></script>
	<script src="js/utils/imagePreloader.js"></script>
	<script src="js/utils/featureSupport.js"></script>
	<script src="js/utils/filters.js"></script>
	<script src="js/utils/pooling/pooling.js"></script>
	<script src="js/utils/pooling/point_pool.js"></script>
	<script src="js/utils/pooling/shape_pool.js"></script>
	<script src="js/utils/pooling/shapeCollection_pool.js"></script>
	<script src="js/renderers/BaseRenderer.js"></script>
	<script src="js/renderers/SVGRenderer.js"></script>
	<script src="js/renderers/CanvasRenderer.js" data-light-skip="true"></script>
	<script src="js/renderers/HybridRenderer.js" data-light-skip="true"></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/svgElements/effects/SVGTintEffect.js"></script>
	<script src="js/elements/svgElements/effects/SVGFillFilter.js"></script>
	<script src="js/elements/svgElements/effects/SVGStrokeEffect.js"></script>
	<script src="js/elements/svgElements/effects/SVGTritoneFilter.js"></script>
	<script src="js/elements/svgElements/effects/SVGProLevelsFilter.js"></script>
	<script src="js/elements/svgElements/effects/SVGDropShadowEffect.js"></script>
	<script src="js/elements/svgElements/SVGEffects.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" data-light-skip="true"></script>
	<script src="js/elements/canvasElements/CVCompElement.js" data-light-skip="true"></script>
	<script src="js/elements/canvasElements/CVImageElement.js" data-light-skip="true"></script>
	<script src="js/elements/canvasElements/CVMaskElement.js" data-light-skip="true"></script>
	<script src="js/elements/canvasElements/CVShapeElement.js" data-light-skip="true"></script>
	<script src="js/elements/canvasElements/CVSolidElement.js" data-light-skip="true"></script>
	<script src="js/elements/canvasElements/CVTextElement.js" data-light-skip="true"></script>
	<script src="js/elements/htmlElements/HBaseElement.js" data-light-skip="true"></script>
	<script src="js/elements/htmlElements/HSolidElement.js" data-light-skip="true"></script>
	<script src="js/elements/htmlElements/HCompElement.js" data-light-skip="true"></script>
	<script src="js/elements/htmlElements/HShapeElement.js" data-light-skip="true"></script>
	<script src="js/elements/htmlElements/HTextElement.js" data-light-skip="true"></script>
	<script src="js/elements/htmlElements/HImageElement.js" data-light-skip="true"></script>
	<script src="js/elements/htmlElements/HCameraElement.js" data-light-skip="true"></script>
	<script src="js/animation/AnimationManager.js"></script>
	<script src="js/animation/AnimationItem.js"></script>
	<!-- Expressions -->
	<script src="js/utils/expressions/Expressions.js" data-light-skip="true"></script>
	<script src="js/utils/expressions/ExpressionPropertyDecorator.js" data-light-skip="true"></script>
	<script src="js/utils/expressions/ExpressionManager.js" data-light-skip="true"></script>
	<script src="js/utils/expressions/ShapeInterface.js" data-light-skip="true"></script>
	<script src="js/utils/expressions/TextInterface.js" data-light-skip="true"></script>
	<script src="js/utils/expressions/LayerInterface.js" data-light-skip="true"></script>
	<script src="js/utils/expressions/CompInterface.js" data-light-skip="true"></script>
	<script src="js/utils/expressions/TransformInterface.js" data-light-skip="true"></script>
	<script src="js/utils/expressions/ProjectInterface.js" data-light-skip="true"></script>
	<script src="js/utils/expressions/EffectInterface.js" data-light-skip="true"></script>
	<script src="js/utils/expressions/ExpressionValue.js" data-light-skip="true"></script>
	<script src="js/effects/SliderEffect.js" data-light-skip="true"></script>
	<script src="js/effects.js" data-light-skip="true"></script>
	<!-- end Expressions -->
	<!-- endbuild -->
	<script src="js/module.js" data-skip="true"></script>
	<!-- <script src="bodymovin.js"></script> -->
	<!-- <script src="bodymovin_light.js"></script> -->
	</head>
	<body>
	<div id="bodymovin"></div>

	<script>

	var anim;
	var elem = document.getElementById('bodymovin')
	var animData = {
	container: elem,
	renderer: 'canvas',
	loop: true,
	autoplay: true,
	rendererSettings: {
	progressiveLoad:false,
	dpr: 1
	},
	path: 'exports/render/data.json'
	};
	anim = bodymovin.loadAnimation(animData);
	anim.addEventListener('DOMLoaded', function(){
	window.addEventListener('mousemove', function(ev){
	anim.renderer.globalData.mouseCoords.x = ev.offsetX \|\| ev.pageX;
	anim.renderer.globalData.mouseCoords.y = ev.offsetY \|\| ev.pageY;
	})
	createDrawingCanvas();
	})

	function createDrawingCanvas(){

	var canvasW, canvasH;
	var currentAnimFrame = -1;
	var isEven = false;
	var maxOffset = 250;
	var currentOffset = 0;
	var offsetDir = -1;
	var lastSecond = Number.NEGATIVE_INFINITY;
	var xOffset = 0;
	var newSegmentHeight = 40;
	var pairs = [];

	function tick(time){
	////
	/*// get svg data
	var xml = new XMLSerializer().serializeToString(sourceSVG);

	// make it base64
	var svg64 = btoa(xml);
	var b64Start = 'data:image/svg+xml;base64,';

	// prepend a "header"
	var image64 = b64Start + svg64;

	// set it as the source of the img element
	imgHelper.src = image64;*/
	////
	isEven = !isEven;
	if(isEven){
	//canvasCtx.globalCompositeOperation = 'exclusion';
	}else {
	//canvasCtx.globalCompositeOperation = 'multiply';
	}
	if(offsetDir > 0){
	currentOffset = currentOffset >= maxOffset ? maxOffset : currentOffset + offsetDir;
	} else {
	currentOffset = currentOffset <= 0 ? 0 : currentOffset + offsetDir;
	}

	if(anim.currentFrame !== currentAnimFrame){
	var newPairs = false;
	if(time - lastSecond > 1000){
	newPairs = true;
	pairs.length = 0;
	}
	currentAnimFrame = anim.currentFrame;
	var currentH = 0, currentPair = 0;
	while(currentH < canvasH){
	if(newPairs){
	newSegmentHeight = 2 + Math.round(20*Math.random());
	if(currentH + newSegmentHeight > canvasH){
	newSegmentHeight = canvasH - currentH;
	}
	xOffset = Math.round(Math.random()*(canvasW - 1));
	pairs.push([newSegmentHeight, xOffset]);
	} else {
	newSegmentHeight = pairs[currentPair][0];
	xOffset = pairs[currentPair][1];
	currentPair += 1;
	}
	//var xOffset = 1 + Math.round(Math.random()*currentOffset);
	//xOffset = 0;
	bufferCanvasCtx.drawImage(source, xOffset, currentH, canvasW - xOffset, newSegmentHeight, 0 , currentH, canvasW - xOffset, newSegmentHeight);
	bufferCanvasCtx.drawImage(source, 0, currentH, xOffset, newSegmentHeight, canvasW - xOffset , currentH, xOffset, newSegmentHeight);
	currentH += newSegmentHeight;
	}
	canvasCtx.drawImage(bufferCanvas, 0, 0);
	if(newPairs){
	lastSecond = time;
	}
	}

	requestAnimationFrame(tick);
	}

	function elemDownHandler(){
	offsetDir = 2;
	}

	function elemUpHandler(){
	offsetDir = -5;
	}

	var source;
	///
	var sourceCanvas = elem.getElementsByTagName('canvas')[0];
	sourceCanvas.style.display = 'none';
	source = sourceCanvas;
	canvasW = sourceCanvas.width;
	canvasH = sourceCanvas.height;
	///
	/*var sourceSVG = elem.getElementsByTagName('svg')[0];
	sourceSVG.style.display = 'none';
	var imgHelper = document.createElement('img');
	source = imgHelper;
	canvasW = 1024;
	canvasH = 768;*/
	///
	var canvas = document.createElement('canvas');
	var bufferCanvas = document.createElement('canvas');
	var canvasCtx = canvas.getContext('2d');
	var bufferCanvasCtx = bufferCanvas.getContext('2d');
	canvas.width = canvasW;
	canvas.height = canvasH;
	bufferCanvas.width = canvasW;
	bufferCanvas.height = canvasH;
	//canvasCtx.globalCompositeOperation = 'darken';
	elem.appendChild(canvas);
	elem.addEventListener('mousedown', elemDownHandler);
	elem.addEventListener('mouseup', elemUpHandler);
	requestAnimationFrame(tick);


	}

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