ZUMI - Part 02

In this example below you will see how to do a ZUMI - Part 02 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Manfred Kempener, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Manfred Kempener ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>ZUMI  -  Part 02</title>
  
  
  <link rel='stylesheet prefetch' href='https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  	<div id="buttons">
		<h2 id="again">again</h2>
		<h2 id="more">more</h2>
	</div>

	<div id="introLines">
		<div class="wrapper">
		<h2 class="line">ZUMI´s</h2>
		<h2 class="line">neue Welt.</h2>
		</div>
	</div>
	
	<div class="svgContainer">
	<svg xmlns="http://www.w3.org/2000/svg" id="zumi" viewbox="0 0 356 320" width="356" height="320">
  <g id="layer1">
    <path id="path4843" fill="#2f90ff" stroke="#000" stroke-width="1.82" d="M233.66 296.44c7.54-.44 15.65 2.13 16.24 2.47 5.23 3.1 8.92 9.9 1.2 10.2-1.65-6.9-9.1-5.1-14-6.4 31.67 2.2 4.9 18.9-20.55 7.3.87.3 15.43-13.4 17.1-13.5z"/>
    <path id="path4845" fill="#2f90ff" stroke="#000" stroke-width="1.8" d="M154.84 315.65c-2.64-3.23 16-15.86 27.2-9.9 5.87 3.1 13.97 10.92-1.82 12.18" stroke-linecap="round"/>
    <path id="path4847" fill="#2f90ff" stroke="#000" stroke-width="1.82" d="M172.75 309.96c5.43.25 15.72 11.92-3.5 7.58" stroke-linecap="round"/>
    <path id="path4849" fill="#2f90ff" stroke="#000" stroke-width="1.82" d="M163.98 311.5c5.43.26 16.9 13.1-9.62 4.67" stroke-linecap="round"/>
    <path id="path4893" fill="#ead81c" stroke="#000" stroke-width="3.04" d="M250.68 298.3c-2.25-5.28-5.94-4.78-8.95-7.02 3.08-15.4-2.3-55.3-11.43-74.36-3.87-39.47-86.45-42.22-100.73 17.73-2.94 12.33-.33 29.07-.67 42.56 3.88 11.5 5.1 21.9-2.88 29.1v8.7l16.62-5.1c-7.14 5.7-4.77 8.1 10.23 6.1 3.82-5.4 7.86-10.4 15.03-8.3 1.9-2.5 3.2-6.3 8.3-2.5 2.78-6.5-1.86-16.4 1.53-22.7 1.02-1.9 6.56-2.7 9.17-4.2 14.93 8.5 15.07 13.6 12.32 20-1.74 2.97-2.63 6.1-9.27 8.3 5.44.63 6.13 4.07 17.9-3.2-2.96 16.5 25.8-.06 24.73-8.93 3.05 1 17.32 3.3 18.1 4.1z"/>
    <path id="path4875" fill="#ead81c" stroke="#000" stroke-width="3.04" d="M173.97 280.4c23.94 6.66 41.58-.56 52.74-22.04" stroke-linecap="round"/>
    <path id="armRechts" fill="#ead81c" stroke="#000" stroke-width="3.04" d="M216.8 210.36c1.83.9 4.7 8.04 9.68 10.2 3.55 1.57 1.56 2.3 6.66 2.3-8.27-2.38-4.42-1.28-14.57-9.1-7.48-2.08-8.1-9.3-6.9-7.8m2.95-10.97c7.4.8 21.43 6.5 25.27 11.4 8.5 6.3 11.9 39.7-3.1 37.7-17.3-1-19.2-5.2-23.5-9.9-1.6-1.7-.6-6.2-3.3-7.6" stroke-linecap="round" stroke-linejoin="round"/>
    <path id="handLinks" fill="#2f90ff" stroke="#000" stroke-width="1.82" d="M179.73 210.25c13.94-13.04 19.38-6.22 7.65 1.35 11.42-1.05 17.58 8.34 4.12 10.72 8.77.12 11.67 5.54 2.48 10.3"/>

    <path id="path4873" fill="#ead81c" stroke="#000" stroke-width="3.04" d="M156.7 195.7c-11.06 9.16-32.66 21.66-27.42 35.8 4.82 10.35 27.04 27.26 37.74 22.52 10.62-6.92 13.87-13.85 20.8-20.78 12.18 2.47 2.63-13.67-6.57-12.1 18.16-3.9-.6-6.82-2.92-8.7.88-10.73-7.62 3.9-8.6 9-1.43 7.46-14.8 15.1-17.34.06-.6-3.38-.7-6.1 1.1-12.88" stroke-linecap="round"/>

    <g id="g3303" class="head">
      <path id="path4448" fill="#fff" d="M85.06 90.83c60.27-3.07 120.54-7 180.8-23.5l8.98 31.2c-44.32 17.5-89.22 34.45-149.17 36.33l-34.62-3z"/>
      <g id="AugeRechts">
        <g id="g3432-2" fill="#010000" stroke-width="6.07">
          <g id="g4429">
            <g id="g4489">
              <path id="path4903-4" stroke="#0091da" d="M236.47 98.02c-12.9-1.9-.02-18.68 8.92-10.06 7.9 6.04.8 11.54-9 10.06z" class="AugeLinks"/>
              <path id="path4905-5" stroke="#000" d="M242.6 98.77c-16.1 1.08-6.06-19.45 3.75-8.67 3.76 4.13-.83 6.32-3.75 8.67z" class="AugeLinks"/>
            </g>
          </g>
        </g>
        <path id="path4907-5" fill="#fff" d="M243.68 91.85c-.2 1.3-1.62 1.6-2.43 1.54-6.73-.3 3.5-8.2 2.43-1.6z"/>
      </g>
      <g id="AugeLinks">
        <g id="g4422">
          <g id="g4212" fill="#010000" stroke-width="6.07">
            <g id="g3432">
              <g id="g4485">
                <path id="path4903" stroke="#0091da" d="M134.03 116.88c-12.9-1.9.4-19.2 9.33-10.6 8.12 5.14.45 12.08-9.33 10.6z" class="AugeLinks"/>
                <path id="path4905" stroke="#000" d="M140.16 117.63c-16.1 1.08-6.07-19.46 3.75-8.67 3.8 4.13-.8 6.32-3.7 8.67z" class="AugeLinks"/>
              </g>
            </g>
          </g>
        </g>
        <path id="path4907" fill="#fff" d="M140.05 110.7c-.55 1.03-1.3 1.12-2.05 1.27-5.68-.25 2.4-6.76 2.05-1.26z"/>
      </g>
    <path id="head" fill="#ead81c" stroke="#000" stroke-width="3.04" d="M187.75 2.27c-2.15 19.05-5.26 37.67-18.1 51.97v-23.1c-2.2 16.1-13.2 21.62-20.8 31.22.6-.05-30.78 7.35-40.35 12.9-14.37 8.6-30.57 2.57-46 2.57l-46-7.06c-7.08.4-24.48-5.75-7.03 10.25-6.6.12-13.03.24-1.97 5.06-2.06 9.5 1.23 9.5 4.47 9.6 23.3 49.16 41.15 37.72 76.25 42.84-.6 18.84-2.28 30.35 7.28 44.53l1.37-14.9 23.5 24.4 1.82-13.6c5.7 5.76 13.8 9.17 16.3 18.13l4.5-7.25v.13c18.8 12.64 6.3 4.33 38.3 10.43 19.5-.1 52.2-9.7 56.6-19.5l1.3 9c7-13.9 18.1-9.6 23.9-20.4l3.6 13.1c6-11.1 12.64-20.5 19.84-28 3.9 5.1 2.47 4.1 4.44 12.1 8.27-10.5 13.1-25.9 6.9-49.8 17.03-17.5 34.9-5.3 51.94-67.7 8.6-13.1.6-7.6-.4-10 8.6-23.5-.95-15.2-5.85-14.9 9.1-19.8.6-19.9-6.3-4.6-20.5 15.53-41.4 30.32-67.8 35.22-27.23-6.4-30.86 4.65-43.86-2.05.7-13.4-6.6-13.3-6.76-23.9-3.27 9.1-14.05 15.2-19.45 25.1 3.8-20.03 11.1-41.23-11.88-52zm51.7 75.84c8.94-.1 18.18 7.2 21.05 22.4-12.72-4.1-31.37.6-40.8 5.3-.2-17.9 9.6-27.5 19.74-27.6zm-102.14 18c8.4-.4 17.4 5.6 21.7 19.5-14.1.4-26.2 2.3-39.8 11.3-2.3-18.8 7.4-30.1 18.2-30.7z" stroke-linecap="round"/>
      <path id="path4861" fill="none" stroke="#000" stroke-width="3.04" d="M115.95 93.56c6.9-11.24 14.8-17.6 25.3-10.85"/>
      <path id="path4863" fill="none" stroke="#000" stroke-width="3.04" d="M219.9 73.23c6.93-11.24 19.8-8.1 30.3-1.36"/>
      <path id="path4865" fill="none" stroke="#000" stroke-width="3.04" d="M335.18 38.42c-18.33 3.92-31.13 32.46-56.96 38.42 7.5 12.97 17.16 21.64 19.12 39.2" stroke-linecap="round"/>
      <path id="path4879" fill="none" stroke="#000" stroke-width="3.04" d="M109.9 136.78c-5.34.5-6.3 4.73-6.7 10.16" stroke-linecap="round"/>
      <path id="path4881" fill="none" stroke="#000" stroke-width="3.04" d="M282.5 113.4c2.5-4.88-5.7-12.4-9-10.05" stroke-linecap="round"/>
      <path id="path3376" fill="#8c0000" stroke="#000" stroke-width="3" d="M223.34 134.56c-.3 2.07 49.44-28 49.34-25.15-.85 24.1-30.93 67.6-70.77 71.8-59.3 6.3-82.5-28.2-90.6-38.8-1.3-1.7 22.9 3.8 17 4.6"/>
      <g id="gzaehne" fill="#fff" stroke="#000" stroke-width="2.42">
        <path id="path4869-5" d="M148.54 144.5l2 9.34c1.87 8.16 22.3 4.77 20.7-2.42l-1.26-8.97"/>
        <path id="path4869-5-5" d="M170.88 141.93l2.18 8.8c1.86 8.17 23.1 3.98 21.5-3.22l-1.68-9.3"/>
        <path id="path4869-5-1" d="M192.66 138.32l2.02 8.4c1.85 8.18 22.7 4.78 21.1-2.4l-1.9-11.36"/>
        <path id="path4869-5-7" d="M213.38 132.67l3.27 9.5c1.85 8.16 24.34 1.73 22.74-5.46l-1.8-12.6"/>
      </g>
    <path id="path4139" fill="none" stroke="#000" stroke-width="3" d="M42.22 93.44c1.65-8 41.34 11.12 51.94 8.3-2.73 12.03-8.42 22.28-5.93 36.05"/>
      <path id="mund01" fill="none" stroke="#000" stroke-width="3" d="M109.9 141.75c44.23 6.42 101.1-1.34 162.87-33.5" stroke-linecap="round"/>
	<path id="path4885" fill="none" stroke="#000" stroke-width="3.04" d="M217.94 184.92c-2.17 5.45-31.34 7.2-27.72 3.64" stroke-linecap="round"/>
      <path id="mundAuf02" fill="#ead81c" d="M110.67 144.3c33.06 61.84 151.54 61.95 164.15-33.9-23.1 88.38-123.95 98.7-164.15 33.9z" class="visibility"/>
	<path id="mundAuf01" fill="#ead81c" d="M110.17 143.8c43.18 4.44 113.44-4.1 164.34-36.32 2 79.3-130.5 113.1-164.3 36.3z"/>
    <path id="path4869" fill="#fff" stroke="#000" stroke-width="3.04" d="M239.64 124.37l.92 1.36 2.3 11.9c2.22 10.66 26.8 5.2 24.88-4.2l-.2-20.58-.75-1.28"/>
      <path id="path4869" fill="#fff" stroke="#000" stroke-width="3.04" d="M239.64 124.38l.93 1.37 2.28 11.88c2.23 10.67 27.35 7.36 25.43-2.03l-.74-22.74-.75-1.28"/>
      <path id="path4867" fill="#fff" stroke="#000" stroke-width="3.04" d="M122.25 144.43l-.03 11.3c.8 12.44 27.62 13.9 28.93.44l-1.07-11.88"/>

    <path id="path4139" fill="none" stroke="#000" stroke-width="3" d="M42.22 93.44c1.65-8 41.34 11.12 51.94 8.3-2.73 12.03-8.42 22.28-5.93 36.05"/>
	<path id="armPutzen02" class="visibility" fill="#ead81c" stroke="#000" stroke-width="3" d="M215.36 193.97c17.7 3.6 24.58 9.16 32.22 17.88 2.7 3.07 10.08 1.67 8-1.6 1.5-9.9 4.03-19-2.48-29.38l20.23 2.15c2.9 18.5-.66 32-4.15 45.8-.75 7.22-6.55 7.18-10.87 5.73-14.8-4.44-23.7-9.23-34.6-20.63"/>
    <path id="armPutzen01" class="visibility" fill="#ead81c" stroke="#000" stroke-width="3" d="M216.18 194.2c17.7 3.6 23.1 11.6 32.07 17.32 3.44 2.18 7.5.88 5.04-2.12-7.3-8.93-13.1-20.76-19.6-31.15l20.6 2.15c7.5 13.62 18.2 34.6 14.7 48.42-.75 7.22-6.55 7.18-10.87 5.73-14.83-4.44-23.75-9.9-34.67-21.3"/>
    <g id="buerste" class="visibility">
      <g id="g3983">
        <path id="path3866" class="buer01" fill="#f2f0ef" stroke="#303234" d="M728.57 646.44l-6.3-16.6c-1.7-4.48 5-3.7 6.87-1 1.27-6.15 5.12-3.07 7.87-.7 2.7-2.63 3.4-3.77 7.2-.3 1-2.7 3.8-4.38 6.5-.14 4-3.86 5.2-1.5 7.8.14 1.27-2.27 6.88-4.14 8.3 1 2.3-2.78 4.6-2.55 6.88 1.15 1.7-1.1 2.88-4.6 6 1.1l-.7 15.3" transform="matrix(.7484 .08404 -.1111 .8002 -343.927 -420.47)"/>
        <path id="path3868" class="buer" fill="none" stroke="#000" d="M730.28 631.85l2.3 10" stroke-linecap="round" transform="matrix(.7484 .08404 -.1111 .8002 -343.927 -420.47)"/>
        <path id="path3868-7" class="buer" fill="none" stroke="#000" d="M725.78 631.92l2.43 8" stroke-linecap="round" transform="matrix(.7484 .08404 -.1111 .8002 -343.927 -420.47)"/>
        <path id="path3868-1" class="buer" fill="none" stroke="#000" d="M774 631.78l-1.86 8" stroke-linecap="round" transform="matrix(.7484 .08404 -.1111 .8002 -343.927 -420.47)"/>
        <path id="path3868-15" class="buer" fill="none" stroke="#000" d="M766.84 630.63l-.57 8.44" stroke-linecap="round" transform="matrix(.7484 .08404 -.1111 .8002 -343.927 -420.47)"/>
        <path id="path3868-2" class="buer" fill="none" stroke="#000" d="M758.83 629.34l.14 10.02" stroke-linecap="round" transform="matrix(.7484 .08404 -.1111 .8002 -343.927 -420.47)"/>
        <path id="path3868-76" class="buer" fill="none" stroke="#000" d="M750.82 630.06l-.15 8.87" stroke-linecap="round" transform="matrix(.7484 .08404 -.1111 .8002 -343.927 -420.47)"/>
        <path id="path3868-14" class="buer" ill="none" stroke="#000" d="M744.38 630.06v9.44" stroke-linecap="round" transform="matrix(.7484 .08404 -.1111 .8002 -343.927 -420.47)"/>
        <path id="path3868-23" class="buer" fill="none" stroke="#000" d="M737.5 631.06l.87 9.02" stroke-linecap="round" transform="matrix(.7484 .08404 -.1111 .8002 -343.927 -420.47)"/>
      </g>
      <path id="stilSchatten" fill="#0d5730" d="M287.8 178.22c8.64 3.07 3.76 11.8-1.1 11.04L174 170.06c-7.96-4.47-19.96-13.9-4.68-10.65 3.08 1.7 4.73 3.8 8.16 4.3 36.9 3.9 73.47 8.6 110.3 14.6z"/>
      <path id="path3096" fill="#0d9130" d="M287.1 179.12c8.68 3.07 3.78 11.8-1.1 11.04l-113.04-19.2c-.76 0-5.68-1.44-9.86.64-2.26.77-21.08-.87-31.24-3.86-7.4-5.3-7.55-11.27.75-14.8 9.4-1.12 18.9.47 26.6 1.58 8.1 1.46 7.2 3.47 10.5 6.06 1.5 2.17 3.4 3.45 6.9 4.02 37 3.85 73.7 8.58 110.68 14.52z"/>
      <path id="handRechtsBuerste" fill="#2f90ff" stroke="#000" stroke-width="1.82" d="M228.65 171.55c-6.14 6.32.78 15.9 10.3 1.27-8.77 9.58-2.1 16.66 3.5 5.67-3.03 7.2 5.78 11.3 9.83-2.5-2.32-10.4-18.42-9.9-23.63-4.5z"/>
    </g>   
  </g>
    <path id="handRechts" fill="#2f90ff" stroke="#000" stroke-width="1.82" d="M206.02 211.1c-.1 1.4-5.9 1.6-6.42 3.64-.97 3.84-.3 11.3 4.43 13.32 9.37 4.04 18.7 5.13 19.3-9.98-5.35-13.93-12.47-16.76-22.1-15.33-8.16 3.32-9.65 14.9 9.75 7.42-11.86 5.26-8.6 14.42.94 6.6-5.7 5.46-.88 16.3 6.94 6.67"/>
    <path id="handRechtsDaumen" class="visibility" fill="#2f90ff" stroke="#000" stroke-width="1.82" d="M205.66 212c-.1 1.38-5.66 1.5-6.34 4.05-1.03 3.83-.28 11.3 4.43 13.32 9.37 4.04 18.7 5.13 19.3-9.98-1.33-10.4-6.53-11-10.04-13.4-8.1-34.2-21.7 12.9-2.3 5.4-11.8 5.2-8.6 14.4 1 6.6-5.7 5.4-.9 16.3 7 6.6"/>
</svg>
		<div class="talk">
			<h2>SEE YOU</h2>
			<svg xmlns="http://www.w3.org/2000/svg" id="svg4711" viewbox="0 0 416 54" width="416" height="54">
			  <g id="layer1">
				<path id="path4719" fill="none" stroke="#0057bb" stroke-width="7.09" d="M3.54 49.83H339.8l72.67-46.3" stroke-linecap="round"/>
			  </g>
			</svg>
		</div>
	</div>
	

		<div id="totalTime">1</div>
		<div id="slider"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomWiggle.min.js?v=5'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/mikeK/zumi-part-02-XaWoKG */
html, body {
  height: 100%;
}

body {
	background: #8c8c8c;
	overflow: hidden;
	font-family: 'Oswald', sans-serif;
}
h2 {
	font-family: 'Oswald', sans-serif;
}
#buttons{
	position: absolute;
	top: 20px;
	left: 90%;
	text-align: center;
	visibility:hidden;
}
#buttons h2{
	font-size: 14px;
	cursor:pointer;
}

#introLines{
	position: absolute;
	height: 115px;
    top: 30%;
    left: 5%;
    border-left: 13px solid #656565;
	visibility:hidden;
}
#introLines .wrapper{
	margin-top: 5px;
	overflow:hidden;
}
#introLines h2 {
	font-family: 'Oswald', sans-serif;
    font-size: 53px;
    line-height: 50px;
	color: #656565;
    margin: 0 0 0 10px;
}
.svgContainer {
	position: absolute;
	width: inherit;
    height: 40%;
	top: 100%;
	left: 0;
	opacity: 0;
	pointer-events: none;
}
svg{
  position: absolute;
  height: 100%;
  width: auto;
  overflow: visible;
}
.visibility{visibility:hidden;}

.talk{
  position: relative;
  top: 31%;
  left: -36%;
  width: 13vh;
  height: 33%;
  visibility: hidden;
}
.talk svg{
  width: 26vh;
  height: auto;
  position: absolute;
  top: 60%;
}
.talk h2{
  position: absolute;
  top: 50%;
  color: #0057bb;
  font-size: 2vh;
}


/*=================  Control Slider ============*/
#totalTime{
	position: relative;
	width: 40px;
  top: 0px;
	left: 10px;
	float: left;
}

#slider{
	position: relative;
	width: 352px;
	top: 6px;
	left: 15px;
	float: left;
} 
.ui-widget.ui-widget-content {
  border: 1px solid #696969;
  background: #696969;
}
.ui-slider-horizontal {
    height: 3px;
}

.ui-slider .ui-slider-handle {
    position: absolute;
    width: 10px !important;
    height: 20px !important;
    margin-top: -5px !important;
    background: black;
    border: black;
}

/*Downloaded from https://www.codeseek.co/mikeK/zumi-part-02-XaWoKG */
"use strict";



	
//=========== Particle function BLAKE =====================================
//  You can find this one at http://codepen.io/osublake/pen/qNPydp.

TweenLite.lagSmoothing(32, 16);

var baseContainer = document.querySelector(".svgContainer");


var vw = window.innerWidth;
var vh = window.innerHeight;
var body = document.body;
var zIndex = 1;
var particles = [];
 
var i = 5;
while (i--) {
  particles.push(Particle());
}

var interval ;

function Particle() {

  var dy = 0;
  var vy = 0;
  var time = random(2.5, 3.5);
  var gravity = random(0.05, 0.09);

  var hero = baseContainer.cloneNode(true);
  body.appendChild(hero);

  var tl = new TimelineLite({ paused: true });

  tl.set(hero, { alpha: 1 })
	.set(hero, {
	left: random(10, 90) + "%",
	scale: random(0.9, 1.8),
	xPercent: -50
	})
	.to(hero, time, {
    yPercent: -100,
    rotation: random(-540, 540),
    scale: random(0.2, 0.4),
    x: random(-300, 300),
    y: random(-vh * 1.35, -vh),
    modifiers: {
      y: function y(_y) {
        vy += gravity;
        dy += vy;
        return dy + _y;
      }
    }, onComplete: recycle
	})
	//.staggerTo($headColor,0, {fill:"hsl(" + Math.random() * 360 + ", 50%, 50%)"},0)//==========
	
	.to(hero,0.2,{autoAlpha:0});
	
  var particle = {
    spawn: spawn
  };

  function spawn() {
    ;
    dy = vy = 0;
    hero.style.zIndex = zIndex++;
	
    tl.restart();
  }

  function recycle() {
    particles.push(particle);
  }

  return particle;
}

function emit() {

  interval.restart(true);  // true

  if (particles.length) {
    var particle = particles.shift(); //The shift() method removes the first item of an array, and returns that item.
    particle.spawn();
  }

  
}

function random(min, max) {
  if (max == null) {max = min;min = 0;}
  return Math.random() * (max - min) + min;
}

function chanceRoll(chance) {
  if (chance == null) { chance = 50; }
  return chance > 0 && Math.random() * 100 <= chance;
  console.log(chance);
}


//=========== Intro ================================================
	function intro() {
	var tl = new TimelineMax()
		.set('.line',{x:'-110%'})
		.to('#introLines',0.5,{autoAlpha:1})
		.staggerTo('#introLines h2',1,{x:'0%'},1.25)
		.addLabel("LinesOut")
		.to(baseContainer,0,{left:'70%',top:'32%'})
		.to(baseContainer,1,{autoAlpha:1})	
		.to('#buttons',0.5,{autoAlpha:1});
		//.kill({fill:true}, $headColor)    // ================== ???
		//.to($headColor,0,{fill:'rgb(234, 216, 28)'})   // ================== ???
		return tl;
	}
//=========== TALKING ===============================================
	var mundAuf = new TimelineMax({paused:true})
	.to("#mundAuf01",1, {morphSVG:"#mundAuf02", ease:Sine.easeOut}) 
	
	function talking(talkAmount) {
    var tl = new TimelineLite();
    for (var i = 0; i < talkAmount; i++){
     tl.fromTo(mundAuf, random(0.1, 0.4), {progress:0}, {progress:random(0.4, 1), repeat:1, yoyo:true, ease:Sine.easeInOut})
   }
    return tl;
	}
//=========== Zähne putzen ===========================================
	function putzen() {
    
	var tl = new TimelineMax()     //  {autoRemoveChildren:true}
	.to('#armRechts,#handRechts',0.3,{autoAlpha:0})
	.to('#armPutzen01,#buerste',0.3,{autoAlpha:1},"-=0.2")
	.to("#mundAuf01",0.5, {morphSVG:"#mundAuf02", ease:Sine.easeOut})
	.to("#armPutzen01",0.6, {morphSVG:"#armPutzen02", repeat:9,yoyo:true, ease:Sine.easeOut},0.2)
	.to(".buer01",0, {x:"+=8",scaleY: 0.5, transformOrigin: "100% 100%"},0.2)
	.to(".buer",0, {x:"+=5",scaleY: 0.3,transformOrigin: "100% 100%"},0.2)
	.fromTo(".buer, .buer01", 0.5, {skewX:-30}, {skewX:30,repeat: 9,repeatDelay:0.1,yoyo: true, ease:Sine.easeIn},0.2)
	.to('#buerste',0.6,{x:+20, repeat:9,yoyo:true,ease:Sine.easeOut},0.2)

  .add("horizontal")
	.to('#buerste',0.2,{x:-5, ease:Sine.easeOut})
	.to('#armPutzen01',0.2,{x:-8,y:+2, ease:Sine.easeOut},"-=0.2")
	.to('#buerste',0.3,{y:'+=5', ease:Sine.easeOut},'-=0.2')
	.to('#buerste',0.6,{rotation:8, repeat:9, yoyo:true, transformOrigin:'65% 70%', ease:Sine.easeOut},"horizontal+=0.2")
  .fromTo(" .buer01",0.6, {scaleY: 0.8},{scaleY: 0.3, repeat:9, yoyo:true,transformOrigin: "100% 100%"},"horizontal+=0.2")
    .fromTo(".buer",0.6, {scaleY: 0.8},{scaleY: 0.1, repeat:9, yoyo:true,transformOrigin: "100% 100%"},"horizontal+=0.2")
  //==========================
	.to(".svgContainer", 5, {scale:3.5 },"-=14")
  .to(".svgContainer", 4, {x:-500},"-=14")
	.to(".svgContainer", 1, {x:-300,scale:2})
	.to('#armPutzen01,#buerste',0,{autoAlpha:0},"-=0.8")
	.to('#armRechts,#handRechts',0,{autoAlpha:1},"-=0.8")
	.to("#mundAuf01",0.3, {morphSVG:"#mundAuf01",ease:Sine.easeOut},"-=0.6")
	.add(talking(1))
	.to('.talk',0.3,{autoAlpha:1},"-=0.6")
	 .to(mundAuf, 0.2, {progress:0.3})
  .to('#AugeLinks',1,{x:10,y:-1})
  .to('#AugeRechts',1,{x:-12},"-=1")
  .to('#handLinks, #handRechts', 0.2, {scale:0.9, repeat:7, yoyo:true},"-=1")
  .to("#handRechts",0.3, {morphSVG:"#handRechtsDaumen",ease:Sine.easeOut},"-=0.6")
	return tl;
	}                     //transformOrigin:"100% 50%"  ease:"funWiggle"
	
//=========== MAIN =========================================	
var main = new TimelineMax({delay:1, onUpdate:tweenUpdate})
.add(intro())
.add(talking(2))
.to('#introLines',0.5,{autoAlpha:0})
.to(".svgContainer", 1, {x:-200,scale:1.6})
.to('#AugeRechts, #AugeLinks',1,{y:5})
.to('.head',1.2,{rotation:10, repeat:1, yoyo:true, transformOrigin:'50% 50%'},"-=1.4")
//.to('#AugeRechts, #AugeLinks',1,{x:-1,y:-1})
.add(talking(5))
.to(".svgContainer", 0.5, {x:"-=50"})
.add(talking(3))
.add(putzen(), "+=1")
;




//=========== Buttons ==========================================
	$('#again').click(function(){
		
		interval = 0; //stops / "pause" the particle animation (Jumping ZUMIs) ??
		main.restart();
		//main.seek();
	});
	
	$('#more').click(function(){
		main.pause(0);
		TweenLite.set(baseContainer,{autoAlpha:0});
		TweenLite.to('#buttons',0.5,{autoAlpha:1})
		interval = TweenLite.delayedCall(0.5, emit);
	});

//=========== Control Slider ============================================
	var totalTime = document.getElementById("totalTime");
	function tweenUpdate(){
	  totalTime.innerHTML = main.totalTime().toFixed(2);
	  $("#slider").slider("value", main.progress());
	} 

	$("#slider").slider({
	  range: false,
	  min: 0,
	  max: 1,
	  step:0.001,
	  slide: function ( event, ui ) {
		main.pause();
		//adjust the timeline's progress() based on slider value
		main.progress( ui.value);
		}
	});

Comments