Egg Toggle

egg-toggle.markdown

Egg Toggle

How do you like your eggs?

Another mini-mashup with Bodymovin and GreenSock.

A Pen by Chris Gannon on CodePen.

License.

index.html

<div id="animationWindow">
</div>

script.js

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)
  }
 }
}

scripts

<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>

style.css

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;
}

Can you please tell me how to do the same animation for a custom design of the button and egg?