<div id="animationWindow">
</div>
body {
 background-color: #fff;
/*  background: url('https://codepen.io/jeffreylkarl/pen/jQoXKx') no-repeat */
 overflow: hidden;
 text-align: center;
}

body,
html {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}

#animationWindow {
 width: 100%;
 height: 100%;
 position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
}

var select = function(s) {
    return document.querySelector(s);
  },
  selectAll = function(s) {
    return document.querySelectorAll(s);
  }, 
  animationWindow = select('#animationWindow'),    
    animData = {
		wrapper: animationWindow,
		renderer: 'svg',
		loop: false,
		prerender: true,
		autoplay: false,
  assetsPath: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/2032127/',
		path: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/2032127/wagawin_website_anim3.json'
	}, anim, tl;

	anim = bodymovin.loadAnimation(animData);
 anim.addEventListener('DOMLoaded', onDOMLoaded);
 anim.setSpeed(1);

function onDOMLoaded(e){
 
 var svg = selectAll('svg')[0];
 svg.setAttribute('class', 'tick');
 tl = new TimelineMax({repeat:999});
 
 //Second value below is the animation speed
 tl.to({frame:0}, 30, {
  frame:anim.totalFrames-1,
  ease:Linear.easeNone,
  onUpdate:function(){  
   anim.goToAndStop(Math.round(this.target.frame), true);
  }
 })
 //  .to(svg, 5, {
 //  alpha:0,
 //  ease:Sine.easeIn
 // })
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.2/lottie.min.js