Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Egg Toggle
<div id="animationWindow">
</div>
var select = function(s) {
return document.querySelector(s);
},
selectAll = function(s) {
return document.querySelectorAll(s);
},
animationWindow = select('#animationWindow'),
animData = {
wrapper: animationWindow,
animType: 'svg',
loop: false,
prerender: false,
autoplay: false,
path: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/egg_flip.json'
}, anim;
anim = bodymovin.loadAnimation(animData);
anim.addEventListener('DOMLoaded', onDOMLoaded);
anim.setSpeed(15);
function onDOMLoaded(e){
animationWindow.onclick = function(e){
if(anim.currentFrame > 0){
anim.playSegments([anim.currentFrame, 0], true);
TweenMax.to('.eggGroup', 1, {
x:0,
ease:Elastic.easeOut.config(0.9,0.38)
})
} else {
TweenMax.to('.eggGroup', 1.4, {
x:73,
ease:Elastic.easeOut.config(0.9,0.38)
})
anim.playSegments([anim.currentFrame, 300], true)
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.10.1/bodymovin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
body {
background-color: #29AFB0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#animationWindow {
width: 50%;;
height: 50%;
-webkit-tap-highlight-color:transparent;
cursor:pointer;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.