<canvas class="canvas"></canvas>

<div class="videoCont">
  <video crossorigin="anonymous" autoplay class="player"></video>
</div>


<!-- svg biz -->
<svg id="jungle" viewBox="0 0 700 600">
  <style>
 .st0{fill:#fff}.st1{fill:#683c11}.st2{fill:#95c11f}.st3{fill:#729309}.st6{fill:#d63660}.st7{fill:#d1567c}
  </style>
<g id="leaves">
  <g id="bigleaf" class="topleaves">
		<path id="landingleaf" class="lightgreen" d="M589.4,147c0,0-90.2-6.6-71.2,5.1c19.1,11.7,62,0.2,62,0.2s-73.9,51.2-61.1,52.3c22.7,1.9,63-47.8,63-47.8
			s-9.4,72.3,6.4,54.9C595.1,204.7,589.4,147,589.4,147z"/>
		<path class="lightgreen" d="M614.9,120.8c0,0-73.9,11.9-83.1,1c-9.2-10.9,86.8-5.8,86.8-5.8s10.2,85.3,1.2,84.3
			C611,199.4,610.5,142.7,614.9,120.8z"/>
		<path class="lightgreen" d="M671.8,53.8c0,0-83.9,17.6-95,5.6c-11.1-12,99.1-11.3,99.1-11.3s16,97.2,5.7,96.6
			C671.4,144,668,79.1,671.8,53.8z"/>
		<path class="lightgreen" d="M640,94.3c0,0-62.6,4.8-82.3-9.8c-25.2-18.6,86.6,5,86.6,5s11.4,84.5-4.7,83.7S640,94.3,640,94.3z"/>
		<path class="lightgreen" d="M576.8,152.4c0,0,2.6-2,7-5.7c4.4-3.7,10.7-9.2,18-15.9c3.6-3.4,7.5-7.1,11.6-11.1c4-4,8.2-8.3,12.5-12.9
			c4.2-4.5,8.6-9.3,12.8-14.3c4.3-4.9,8.4-10.1,12.5-15.4c2-2.7,4-5.3,5.9-8c1.9-2.7,3.8-5.4,5.6-8.1c1.8-2.7,3.6-5.4,5.2-8.2
			c0.8-1.4,1.7-2.7,2.5-4.1c0.8-1.4,1.5-2.7,2.3-4.1c0.7-1.4,1.5-2.7,2.2-4c0.7-1.4,1.4-2.7,2-4c1.4-2.6,2.5-5.3,3.7-7.9
			c1.2-2.6,2.1-5.2,3.1-7.7c1-2.5,1.7-5,2.5-7.3c0.8-2.3,1.3-4.6,1.9-6.8c0.3-1.1,0.5-2.2,0.8-3.2c0.2-1,0.4-2.1,0.5-3
			c0.3-2,0.7-3.8,0.9-5.5c0.2-1.7,0.3-3.3,0.4-4.7c0.2-1.4,0.2-2.7,0.2-3.8c0-1.1,0-2,0-2.8c0-1.5,0-2.3,0-2.3l6.3-0.2
			c0,0,0,0.9,0,2.5c0,0.8,0,1.8,0,3c0,1.2,0,2.6-0.2,4.1c-0.2,1.5-0.3,3.2-0.5,5.1c-0.2,1.8-0.6,3.8-1,5.9c-0.2,1-0.4,2.1-0.6,3.2
			c-0.3,1.1-0.6,2.2-0.9,3.4c-0.6,2.3-1.2,4.7-2.1,7.2c-0.8,2.4-1.6,5-2.7,7.6c-1,2.6-2,5.3-3.3,7.9c-1.2,2.7-2.4,5.4-3.9,8.1
			c-0.7,1.4-1.4,2.7-2.1,4.1c-0.7,1.4-1.6,2.7-2.3,4.1c-0.8,1.4-1.6,2.8-2.4,4.2c-0.9,1.4-1.7,2.7-2.6,4.1c-1.7,2.8-3.6,5.5-5.4,8.3
			c-1.8,2.8-3.9,5.4-5.8,8.2c-2,2.7-4.1,5.4-6.1,8c-4.2,5.3-8.5,10.5-12.8,15.4c-4.3,5-8.8,9.7-13.1,14.3
			c-4.3,4.5-8.6,8.8-12.8,12.8c-4.1,4-8.1,7.7-11.8,11.1c-7.4,6.7-13.8,12.1-18.3,15.8c-4.5,3.7-7.2,5.7-7.2,5.7L576.8,152.4z"/>
	</g>
	<g id="smallleaf" class="topleaves">
		<path class="green" d="M532.5,90.4c0,0-61.2,3.7-47.4,9.8c13.8,6.2,41.7-5.4,41.7-5.4s-45.3,41.2-36.6,40.8
			c15.4-0.7,38.3-37.9,38.3-37.9s-0.2,49.6,9,36.4C541.3,128.8,532.5,90.4,532.5,90.4z"/>
		<path class="green" d="M549.7,70.1c0,0-48.7,14.6-55.8,8.1c-7.1-6.5,57.9-11.7,57.9-11.7s14.1,56.7,8,56.8
			C553.8,123.4,548.6,85.2,549.7,70.1z"/>
		<path class="green" d="M564.3,50c0,0-41.7,8.8-56.2,0.8c-18.5-10.3,58.6-4.4,58.6-4.4s14.9,56,4,56.9
			C559.8,104.1,564.3,50,564.3,50z"/>
		<path class="green" d="M526.8,94.8c0,0,1.6-1.6,4.2-4.5c2.7-2.9,6.4-7.1,10.7-12.4c2.2-2.6,4.5-5.5,6.8-8.5
			c2.4-3.1,4.8-6.3,7.3-9.8c2.5-3.4,5-7,7.4-10.8c2.4-3.7,4.8-7.6,7.1-11.5c1.1-2,2.2-3.9,3.3-5.9c1-2,2.1-4,3.1-6c1-2,2-4,2.8-6
			c0.4-1,0.9-2,1.3-3c0.4-1,0.8-2,1.2-3c0.4-1,0.8-2,1.2-2.9c0.3-1,0.7-1.9,1-2.9c0.7-1.9,1.2-3.8,1.8-5.7c0.6-1.8,1-3.7,1.4-5.4
			c0.5-1.8,0.7-3.5,1-5.1c0.3-1.6,0.5-3.3,0.7-4.8c0.1-0.8,0.2-1.5,0.3-2.2c0-0.7,0.1-1.4,0.1-2.1c0-1.4,0.2-2.6,0.1-3.8
			c0-1.2-0.1-2.2-0.1-3.2c0-1-0.1-1.8-0.2-2.6c-0.1-0.7-0.2-1.4-0.2-1.9c-0.1-1-0.2-1.6-0.2-1.6l4.2-0.7c0,0,0.1,0.6,0.2,1.7
			c0.1,0.6,0.1,1.2,0.2,2.1c0.1,0.8,0.2,1.7,0.2,2.8c0,1,0.1,2.2,0.1,3.5c0,1.3-0.1,2.6-0.2,4c0,0.7-0.1,1.5-0.1,2.2
			c-0.1,0.8-0.2,1.5-0.3,2.3c-0.2,1.6-0.4,3.3-0.8,5c-0.4,1.7-0.6,3.5-1.2,5.4c-0.5,1.8-0.9,3.7-1.5,5.6c-0.6,1.9-1.2,3.9-1.9,5.8
			c-0.4,1-0.7,2-1.1,3c-0.4,1-0.8,2-1.2,3c-0.4,1-0.8,2-1.3,3c-0.5,1-0.9,2-1.4,3c-0.9,2-1.9,4-2.9,6.1c-1,2-2.1,4-3.2,6
			c-1.1,2-2.3,4-3.4,6c-2.4,3.9-4.8,7.8-7.3,11.5c-2.5,3.8-5.1,7.4-7.6,10.8c-2.5,3.4-5.1,6.7-7.5,9.8c-2.4,3.1-4.8,5.9-7,8.5
			c-4.4,5.2-8.2,9.4-10.9,12.3c-2.7,2.9-4.3,4.5-4.3,4.5L526.8,94.8z"/>
	</g>
</g>
<g id="fly">
	<path id="rightwing" class="st0" d="M-35.2,45.4c0,0,3.7-17.1,13.7-18.1c10-1,11.3,7.2,8.3,10.6C-16.4,41.2-36,41.8-35.2,45.4z"/>
	<path id="leftwing" class="st0" d="M-36.4,44.6c0,0-1.6-17.4-11.4-19.6s-12.1,5.8-9.5,9.5C-54.6,38.2-35.2,41.2-36.4,44.6z"/>
	<circle id="flybody" cx="-36" cy="45.7" r="8.5"/>
</g>
  <g id="tree">
    <path class="branch" d="M8.1 487.7c3.7-2.7 9.2-6.7 16.3-11.6 14.3-9.8 35.1-23.5 61.2-38 13-7.2 27.3-14.6 42.8-21.7 15.4-7 32-13.6 49.4-18.9 8.7-2.7 17.6-5 26.7-6.8 4.5-.9 9.1-1.6 13.7-2.3l3.4-.4.9-.1h.9l1.9-.2c2.5-.2 4.9-.4 7.4-.7 19.7-1.6 40.1-2.6 60.5-3.5 40.8-1.7 81.9-2.7 120.4-4.7 38.5-1.9 74.5-4.7 105.2-9.1 15.3-2.2 29.3-4.8 41.5-7.7 12.2-2.9 22.7-6.2 31.2-9.5 8.4-3.3 14.7-6.6 18.9-9 1-.6 1.9-1.2 2.7-1.7.8-.5 1.4-1 1.9-1.3 1-.7 1.6-1.1 1.6-1.1s-.6.3-1.6.9c-.5.3-1.2.7-2 1.1-.8.4-1.8.9-2.8 1.5-4.3 2.1-10.8 4.9-19.3 7.4-8.5 2.6-19.1 5-31.4 6.9-12.3 1.9-26.2 3.4-41.4 4.3-30.5 1.9-66.2 1.9-104.5.8-38.3-1.1-79.2-3.3-120.3-4.8-20.6-.8-41.2-1.4-61.8-1.3-2.6 0-5.1 0-7.7.1l-3.9.1-4 .1c-5.4.2-10.7.6-15.9 1.2-10.5 1.1-20.7 2.8-30.6 4.9-19.8 4.2-38.4 9.8-55.7 15.8-17.7 6.1-33.7 12.7-48.2 19.1-29 12.9-52.3 25.4-68.4 34.5-.6.3-1.1.7-1.7 1v64.9c3.5-3 8.1-6.8 8.6-7.2.9-.6 2.3-1.7 4.1-3z"/>
    <path class="branch" d="M510.3 458.8c-.9-1-1.9-2.2-3-3.6s-2.4-2.8-3.9-4.3c-1.4-1.6-3-3.2-4.7-5-3.4-3.5-7.5-7.3-12.1-11.2-4.6-3.9-9.8-7.9-15.5-11.9-5.7-4-12-7.8-18.6-11.5-6.6-3.7-13.8-7.2-21-10.5-3.6-1.6-7.3-3.2-11-4.8-1.9-.8-3.7-1.5-5.6-2.3l-5.6-2.2c-3.8-1.5-7.6-2.8-11.3-4.3-3.8-1.3-7.6-2.7-11.4-3.9-7.5-2.5-15-4.9-22.3-7-7.3-2.1-14.3-4.1-21-5.8-3.4-.9-6.6-1.7-9.8-2.5-3.2-.8-6.2-1.5-9.2-2.2-5.9-1.4-11.3-2.6-16-3.7-4.8-1.1-9-2-12.4-2.7-6.8-1.5-10.7.1-10.7.1l-4.1 23.3s4 .4 10.9 1.2c3.4.4 7.6.9 12.4 1.4 4.8.6 10.2 1.3 16 2 2.9.4 6 .8 9.1 1.3 3.2.5 6.4 1 9.8 1.4 6.7 1.1 13.7 2.2 21 3.6 7.3 1.3 14.7 2.9 22.3 4.6 3.8.8 7.6 1.8 11.4 2.7 3.8 1 7.6 1.9 11.4 3l5.7 1.6c1.9.6 3.8 1.1 5.6 1.7 3.8 1.1 7.5 2.4 11.2 3.5 7.4 2.4 14.4 5.1 21.2 8 6.8 2.9 13.2 6 19.1 9.2 5.9 3.3 11.4 6.6 16.3 10 4.9 3.4 9.2 6.6 12.9 9.7 1.9 1.5 3.6 3 5.1 4.4 1.6 1.4 3 2.7 4.2 3.9 1.3 1.2 2.4 2.3 3.4 3.2.9 1 1.7 1.8 2.4 2.5 1.3 1.3 2 2.1 2 2.1s-.6-.8-1.8-2.3c-.8-.7-1.6-1.6-2.4-2.7z"/>
    <path class="branch" d="M309.4 451.9c-5.6 1.5-13.8 2.6-23.6 2.9-9.9.4-21.4 0-33.6-1.2-6.1-.6-12.4-1.4-18.7-2.4-6.3-1.1-12.6-2.4-18.7-4.3-6.1-1.8-12-4.1-17.6-6.8-5.6-2.7-10.9-5.7-16-8.9s-10-6.5-14.6-9.8c-4.7-3.2-9.2-6.3-13.4-9.1-8.4-5.6-15.7-10.2-20.8-13.2-5.1-3-8-4.7-8-4.7l-11.7 23.8s3 1.2 8.3 3.4c5.2 2.2 12.6 5.5 21.4 9.8 4.4 2.1 9.2 4.5 14.3 7.1 5.1 2.6 10.6 5.3 16.5 8s12.2 5.2 18.8 7.3c6.6 2.1 13.4 3.7 20.2 4.8 6.8 1.1 13.7 1.7 20.3 2.1 6.7.4 13.2.5 19.5.4 12.6-.2 24.3-1.1 34.3-2.6 9.9-1.4 18.1-3.5 23.6-5.6 2.7-1.1 4.8-2.1 6.2-2.8 1.4-.8 2-1.2 2-1.2s-.7.4-2.2 1c-1.6.5-3.7 1.3-6.5 2z"/>
    <path class="lightgreen" d="M444.9 349.4c-1.4 12.5 6.3 16.1 6.3 16.1s8.8 1.1 10.3-12.9c1.5-13.9-6.4-22.9-6.4-22.9s-8.9 7.1-10.2 19.7z"/>
    <path class="green" d="M424.9 342.5s0 11.4 9 20.2c8.9 8.9 16.5 5 16.5 5s6.3-6.2-3.6-16.1c-9.9-9.8-21.9-9.1-21.9-9.1z"/>
    <path class="green" d="M487.4 420.2c-11.6 6.9-7.2 14.3-7.2 14.3s6.2 5.4 16.7-.9c10.5-6.2 13.2-16.9 13.2-16.9s-11-3.4-22.7 3.5z"/>
    <path class="lightgreen" d="M312.1 435.5c-9.2 10.8-2.3 16.5-2.3 16.5s7.9 3.2 16.2-6.5c8.2-9.7 7.3-21.1 7.3-21.1s-12 .3-21.2 11.1z"/>
    <path class="green" d="M323 445.7c-14.1-.5-14.3 8.5-14.3 8.5s2.4 8.2 15.1 8.7c12.7.4 21.1-7.4 21.1-7.4s-7.8-9.4-21.9-9.8z"/>
  </g>

 <path id="backfoot" class="change" d="M133.7 336.1s1.4 25.4 30.4 30.9 19.6-9.6 8.4-12.9c-11.2-3.2-12.2-13-12.2-13l-26.6-5z"/>
      <path id="frontfoot" class="change" d="M225.3 339.7s5.4 22.6 32.4 22.8c27 .2 16.1-11.9 5.4-13-10.7-1.1-13.1-9.7-13.1-9.7l-24.7-.1z"/>
  <g id="chameleon">
    <path id="tongue" class="st4" d="M286.2,313.2c0,0,134.7,55.4,231-122"  fill="none" stroke="#ea88b5" stroke-width="3" stroke-miterlimit="10"/>
<circle id="blob" class="tongue" cx="281.9" cy="311.4" r="7.1"/>

    <path id="mouth" class="changeLight" d="M262.1,334.4c0,0,14.5,6,36.6,2.3c22.1-3.7,26.9-12.2,30.6-17.9s-49.3,7-59.3-1.2
	c-10-8.2-17-13.3-18.7-9.7C249.6,311.6,245.7,324.5,262.1,334.4z"/>
<ellipse id="belly" class="changeLight" cx="197.4" cy="300.9" rx="83.5" ry="55.1"/>
<path id="body" class="change" d="M253.8 254.2S215.3 226 172.6 237s-68.2 49.6-79.9 95.5C80.4 380.7 79 441.6 80.6 455.7c.8 7.4 2.1 41.3 18.1 56.1 16.1 14.8 40.8 15.1 58 8.3 17.2-6.8 27.1-27.3 27.2-33.7s-.2-27.9-26-28.8c-25.8-1-27.9 10.8-28.2 20.5-.3 9.7 6.4 16 16.4 16.1s13.6-5.3 13.7-11.3c0-6-5.5-12.5-8.3-10.5s.7 2 2.2 7.3c1.5 5.3-1.4 8.5-6.9 8.7-5.5.2-9.1-3.5-9.8-10.3-.7-6.8 6.1-13 13.3-13.2s24 3.2 23.6 17.4-17.6 23.9-28.7 24.1c-11 .2-22.3-3.8-33.6-17.5s-11-41.7-8.6-64.7c2.5-23 14.8-55.2 21.6-69.9 6.8-14.7 28.3-46.1 65-46.3 36.8-.3 29.2 4.9 42.2 7s13-3.7 23-2.6 8.4 9.6 24.9 10.4 22.5-5.4 33.5-2.5 26.5-3.3 33.1-11.8c6.6-8.5-3.3-22.4-9.8-28.6-6.6-6.2-57.9-90.4-78.6-67s-4.1 41.3-4.1 41.3z"/>
<g id="eyeball">
<circle id="eye" class="changeLight" cx="298.6" cy="273.1" r="31.7"/>
<circle id="pupil" class="st8" cx="286.9" cy="263" r="6"/>
<circle id="highlight" class="st0" cx="285.9" cy="262" r="1.6"/>
</g>
  </g>
 <path id="flypath" stroke-miterlimit="10" stroke="red" stroke-width="3" d="M-0.6,33.9c0,0,89.9-42,85.9-10s-50.7,83,0.1,96c43.8,11.2,34.3,13.4,62.5-5.1
	s18.3-42.6,40.6-50.9s31.8,1.1,71.8,18.5s-12.4,72.2,47.1,62.2s-5.5,49.5,67.5,28.5s57-12.5,91-4.2s50.4,22.3,50.4,22.3"/>
</svg>
:root {
  --colour-change : rgb(0, 128, 128);
}

.videoCont {
    display: none;
    width: 60vw;
    height: 60vw;
    max-height: 60vh;
    max-width: 60vh;
    overflow: hidden;
    margin:2rem;
}

.player {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


body {
  height: 100vh;
  margin: 0;
  background-color: #201f21;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: sans-serif;
}

#jungle {
  flex: 0 0 auto;
  display: block;
  background-image: 
    linear-gradient(
      hsla(200, 5%, 1% , 0), 
      hsla(200, 90%, 1%, 1)
    ),
    url(https://images.unsplash.com/photo-1516528387618-afa90b13e000?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=9b98afc9486dcb6e25f5daa32f351625);
  background-color: hsl(200, 30%, 35%);
  background-blend-mode: overlay;
  background-size: cover;
  width: 40vw;
  height: 40vw;
  max-height: 60vh;
  max-width: 60vh;
  border: solid 5px var(--colour-change);
  border-radius: 50%;
  transition: background-color 0.8s ease-out;
}

.green {
  fill: #62bc86;
}

.lightgreen{
  fill: #22b895;
}

.branch {
  fill: #4e4e4d;
}

.tongue{
  fill: #ea88b5;
}

#tongue, #blob {
  opacity: 0;
  visibility: hidden;
}


.change {
  fill: var(--colour-change);
  transition: fill 0.8s ease-out;
}

.changeLight {
  fill: #fff;
  transition: fill 0.8s ease-out;
}

#box {
  position: absolute;
  width: 80px;
  height: 80px;
  background-color: green;
  transition: all 1s ease ;
}

#flypath {
  fill: none;
  stroke: none;
}

#fly {
  opacity: 0;
  visibility: hidden;
}

#flybody {
  fill: #424242;
}
const canvas = document.querySelector('.canvas');
const context = canvas.getContext('2d');
const video = document.querySelector('.player')
const refreshRate = 1000;

function getVideo() {
  navigator.mediaDevices.getUserMedia({ video: true, audio: false })
    .then(webCam => {
      video.srcObject = webCam;
      paintToCanvas();
    })
    .catch(err => {
      console.error('Oh no, you denied the webcam, no fun for you.', err)
    })
}

function paintToCanvas() {
  canvas.width = 1;
  canvas.height = 1;

  setInterval(updateColour, refreshRate);
}

function updateColour() {
    context.drawImage(video, 0, 0, canvas.width, canvas.height);

    let imageData = context.getImageData(0, 0, canvas.width, canvas.height);
    
    let r = imageData.data[0];
    let g = imageData.data[1];
    let b = imageData.data[2];

    let rgb = `rgb(${r}, ${g}, ${b})`

    let root = document.documentElement;

    root.style.setProperty('--colour-change', rgb);
}

window.addEventListener('load', getVideo);












// GSAP Animation
var tongueOut = MorphSVGPlugin.pathDataToBezier("#tongue", {align:"#blob"});
var eatFly = MorphSVGPlugin.pathDataToBezier("#tongue", {align:"#fly"});
var buzz = MorphSVGPlugin.pathDataToBezier("#flypath", {align:"#fly"});



function tongue() {
var tongueOut = MorphSVGPlugin.pathDataToBezier("#tongue", {align:"#blob"});
var tongue = new TimelineMax({repeat:1, yoyo:true});

tongue.set(["#tongue", "#blob"], {autoAlpha: 1},0)
.to("#blob", 0.8, {bezier:{values:tongueOut, type:"cubic"},ease: Expo.easeIn,},0)
.from("#tongue", 0.8, {drawSVG:"0%", ease: Expo.easeIn,},0)
return tongue;
}

function nomnom(){
  var nomnom = new TimelineMax({});
  nomnom.fromTo('#chameleon', 0.5,{yPercent: 0,rotation: "0",},{yPercent: -1,rotation: "-1",transformOrigin:'50% 40%',repeat: 1, yoyo: true, ease: Back.easeInOut.config(3), delay: 0.2})
  .to('#mouth', 0.2,{ yPercent: 2, rotation: "15", transformOrigin:'0% 90%', delay: -0.5})
  .fromTo('#mouth', 0.1,{yPercent: 0,rotation: "0",},{yPercent: 5,rotation: "5",transformOrigin:'0% 90%',repeat: 15, yoyo: true,})
 .to('#mouth', 0.1,{ yPercent:0, rotation: "0", transformOrigin:'0% 90%',})
 .to('#belly', 1.5,{ scale: 1.03, ease: Expo.easeOut})
 .to('#belly', 1,{ scale: 1, ease: Expo.easeOut})
return nomnom;
}
function leaves() {
var leaves = new TimelineMax({});
leaves.staggerTo(".topleaves", 2, {rotation: "-2", transformOrigin:'90% 0%', ease: Elastic.easeOut.config(1.75, 0.5), delay: 0.8},0.2)
.to(".topleaves", 5, {rotation: "0",ease: Power0.easeNone}) 
return leaves;
}
function fly() {
var fly = new TimelineMax({});
 fly.set("#fly", {xPercent:-50, yPercent: -50})
.to("#fly", 7, {bezier:{values:buzz, type:"cubic",},ease: Power0.easeNone}) 
.to("#landingleaf", 0.8, {rotation: "-4", transformOrigin:'90% 0%', ease: Back.easeOut.config(4), delay:-0.1})
.from("#fly", 0.8, {bezier:{values:eatFly, type:"cubic",},ease: Expo.easeOut, delay: 0.8})
.to("#landingleaf", 0.8, {rotation: "0", transformOrigin:'90% 0%', ease: Back.easeOut.config(4), delay:-0.8})
.to("#fly", 0.1, {autoAlpha: 0, delay: -0.1})
return fly;
}
function wingz() {
var wingz = new TimelineMax({});
wingz.fromTo('#leftwing', 0.03,{rotation: "0", opacity: 0.8},{rotation: "40", opacity: 0.2, transformOrigin:'100% 100%',repeat: 270, yoyo: true, ease: RoughEase.ease.config({ template:  Power0.easeNone, strength: 0.2, points: 200, taper: "none", randomize:  true, clamp: false}),},0)
.fromTo('#rightwing', 0.03,{rotation: "0", opacity: 0.8},{rotation: "-40", opacity: 0.2, transformOrigin:'0% 100%',repeat: 270, yoyo: true, ease: RoughEase.ease.config({ template:  Power0.easeNone, strength: 0.2, points: 200, taper: "none", randomize:  true, clamp: false}),},0)
return wingz;
}
function eye() {
var eye = new TimelineMax({});
eye.to("#eyeball", 9, {rotation: "120", transformOrigin:'50% 50%', delay: 2})
return eye;
}

var masterTimeline = new TimelineMax({ repeat: 2, repeatDelay: 1 });
masterTimeline.set("#fly", {xPercent:-50, yPercent: -50, autoAlpha: 1})
  .set("#blob", {xPercent:-50, yPercent: -50})
  .add([fly(),wingz(),eye()],)
  .add([nomnom(),tongue(), leaves()], "-=3.31")

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js?v=333
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=1899