<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
// })
}
This Pen doesn't use any external CSS resources.