Character Saying WOW

character-saying-wow.markdown

Character Saying WOW

This animation was created using svgMotion v1.000-release
Create yours today at https://michaelsboost.com/svgMotion

A Pen by Michael Schwartz on CodePen.

License.

index.html

<div class="svgmotion">
  <!--?xml version="1.0" encoding="UTF-8" standalone="no"?--><!-- Generator: Gravit.io --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation: isolate; filter: blur(0px) hue-rotate(0deg) brightness(1) contrast(1) saturate(1) grayscale(0%) sepia(0%) invert(0%);" viewBox="0 0 256 256"><defs><clipPath id="_clipPath_rgQ5v7CZXIRrFSzv8QXNYEubuI5IEStq"><rect width="256" height="256"></rect></clipPath></defs><g clip-path="url(#_clipPath_rgQ5v7CZXIRrFSzv8QXNYEubuI5IEStq)"><rect width="256" height="256" style="fill:rgb(248,255,247)"></rect><g><g><path d=" M 116 58 C -3.579 59.941 10.5 228.375 116 224 C 220.785 219.655 270 55.5 116 58 Z " fill="rgb(253,222,189)" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"></path><path d=" M 54.137 84.692 L 58.758 93.111 L 98.09 77.133 Q 96.849 74.548 96.337 69.722 Q 95.826 64.895 96.045 65.578 L 54.137 84.692 Z " fill="rgb(0,72,99)"></path><path d=" M 182.232 84.504 L 177.969 93.111 L 138 78.803 Q 139.131 76.168 139.439 71.324 Q 139.747 66.481 139.556 67.172 L 182.232 84.504 Z " fill="rgb(0,72,99)"></path><g><path d=" M 81 98 C 55.333 92.333 42.5 139.738 68 150 C 95.333 161 106.667 103.667 81 98 Z " fill="rgb(255,255,255)" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path><clipPath id="_clipPath_gMCuCmg8GWEd2X4IdMCS1MSRZJb7p9z2"><path d=" M 81 98 C 55.333 92.333 42.5 139.738 68 150 C 95.333 161 106.667 103.667 81 98 Z " fill="rgb(255,255,255)" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path></clipPath><g clip-path="url(#_clipPath_gMCuCmg8GWEd2X4IdMCS1MSRZJb7p9z2)"><path d=" M 76.596 116.693 C 69.058 115.028 65.289 128.95 72.778 131.964 C 80.805 135.195 84.134 118.357 76.596 116.693 Z " fill="rgb(0,72,99)"></path></g><path d=" M 81 98 C 55.333 92.333 42.5 139.738 68 150 C 95.333 161 106.667 103.667 81 98 Z " fill="transparent" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path></g><g><path d=" M 153 98.602 C 124.842 99.317 129.333 154.732 153 152 C 182.159 148.634 176.667 98 153 98.602 Z " fill="rgb(255,255,255)" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path><clipPath id="_clipPath_GUzbwJYkFBsIWCxweNDB11JRzuLTVtwg"><path d=" M 153 98.602 C 124.842 99.317 129.333 154.732 153 152 C 182.159 148.634 176.667 98 153 98.602 Z " fill="rgb(255,255,255)" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path></clipPath><g clip-path="url(#_clipPath_GUzbwJYkFBsIWCxweNDB11JRzuLTVtwg)"><path d=" M 153.145 118.321 C 145.747 118.509 146.927 133.067 153.145 132.349 C 160.805 131.465 159.362 118.163 153.145 118.321 Z " fill="rgb(0,72,99)"></path></g><path d=" M 153 98.602 C 124.842 99.317 129.333 154.732 153 152 C 182.159 148.634 176.667 98 153 98.602 Z " fill="transparent" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path></g><g><g><path d=" M 116 190 Q 110.875 190.063 111 193 Q 111.125 195.938 114 197 Q 110.844 198.031 112 202 Q 113.156 205.969 117 203" fill="none" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path></g><g><path d=" M 113.712 173.01 C 84.347 173.828 91.173 217.91 113.712 216.35 C 143.074 214.317 140.046 172.275 113.712 173.01 Z " fill="rgb(0,72,99)"></path></g></g><path d=" M 113 100 C 115.5 104.5 118 124 116 131 C 114 138 105 147.5 105 156 C 105 164.5 111.586 168.398 118 160" fill="none" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path><g><path d=" M 195 118 C 215.333 97.333 243.107 143.789 200 152" fill="rgb(253,222,189)" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path><path d=" M 206.09 133.337 C 204.757 129.671 208.746 125.775 213.09 133.337 C 218.865 143.392 191.402 139.021 201.09 128.337 Q 208.09 120.619 215.09 126.337" fill="none" stroke-width="2" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path></g><path d=" M 118 57 C 120.333 50.333 123.333 34.667 122 28 C 120.667 21.333 111.667 15.333 105 24 C 98.333 32.667 104.963 45.293 114 37 C 121.219 30.375 113.333 25 109 30" fill="none" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path></g><g><path d=" M 109.1 58 C 67.987 58.727 44.081 82.796 35.346 112.396 C 37.767 123.668 36.566 134.515 31.633 144.181 C 33.571 185.702 60.978 226.173 109.1 224 C 205.316 219.655 250.506 55.5 109.1 58 Z " fill="rgb(253,222,189)" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"></path><clipPath id="_clipPath_OOmwrWbWmp4dcKBsTz8LW8EclSR6dV5O"><path d=" M 109.1 58 C 67.987 58.727 44.081 82.796 35.346 112.396 C 37.767 123.668 36.566 134.515 31.633 144.181 C 33.571 185.702 60.978 226.173 109.1 224 C 205.316 219.655 250.506 55.5 109.1 58 Z " fill="rgb(253,222,189)" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"></path></clipPath><g clip-path="url(#_clipPath_OOmwrWbWmp4dcKBsTz8LW8EclSR6dV5O)"><g><g><path d=" M 64.003 181.73 Q 58.878 181.792 59.003 184.73 Q 59.128 187.667 62.003 188.73 Q 58.847 189.761 60.003 193.73 Q 61.159 197.698 65.003 194.73" fill="none" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path></g><g><path d=" M 65.825 165.01 C 36.46 165.828 43.286 209.91 65.825 208.35 C 95.187 206.317 92.159 164.275 65.825 165.01 Z " fill="rgb(0,72,99)"></path></g></g><g><path d=" M 67.255 98.07 C 95.414 98.786 90.922 154.2 67.255 151.469 C 38.096 148.103 43.589 97.469 67.255 98.07 Z " fill="rgb(255,255,255)" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path><clipPath id="_clipPath_T7u9QwKENArX51ojr74YQQWxfUeGXDHn"><path d=" M 67.255 98.07 C 95.414 98.786 90.922 154.2 67.255 151.469 C 38.096 148.103 43.589 97.469 67.255 98.07 Z " fill="rgb(255,255,255)" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path></clipPath><g clip-path="url(#_clipPath_T7u9QwKENArX51ojr74YQQWxfUeGXDHn)"><path d=" M 57.885 118.001 C 65.282 118.189 64.102 132.748 57.885 132.03 C 50.224 131.146 51.667 117.843 57.885 118.001 Z " fill="rgb(0,72,99)"></path></g><path d=" M 67.255 98.07 C 95.414 98.786 90.922 154.2 67.255 151.469 C 38.096 148.103 43.589 97.469 67.255 98.07 Z " fill="transparent" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path></g><g><path d=" M -5.137 97.469 C -30.803 91.802 -43.637 139.206 -18.137 149.469 C 9.197 160.469 20.53 103.135 -5.137 97.469 Z " fill="rgb(255,255,255)" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path><clipPath id="_clipPath_yTOS5Umo5l90PcUUjt3uugvp99diDYK3"><path d=" M -5.137 97.469 C -30.803 91.802 -43.637 139.206 -18.137 149.469 C 9.197 160.469 20.53 103.135 -5.137 97.469 Z " fill="rgb(255,255,255)" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path></clipPath><g clip-path="url(#_clipPath_yTOS5Umo5l90PcUUjt3uugvp99diDYK3)"><path d=" M -9.541 116.161 C -17.079 114.497 -20.848 128.419 -13.359 131.433 C -5.331 134.663 -2.003 117.825 -9.541 116.161 Z " fill="rgb(0,72,99)"></path></g><path d=" M -5.137 97.469 C -30.803 91.802 -43.637 139.206 -18.137 149.469 C 9.197 160.469 20.53 103.135 -5.137 97.469 Z " fill="transparent" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path></g><path d=" M 92.096 88.393 L 87.832 97 L 47.863 82.692 Q 48.994 80.057 49.302 75.213 Q 49.61 70.37 49.42 71.061 L 92.096 88.393 Z " fill="rgb(0,72,99)"></path><path d=" M -36 88.58 L -31.378 97 L 7.953 81.022 Q 6.712 78.437 6.201 73.61 Q 5.689 68.784 5.908 69.467 L -36 88.58 Z " fill="rgb(0,72,99)"></path></g><path d=" M 109.1 58 C 67.987 58.727 44.081 82.796 35.346 112.396 C 37.767 123.668 36.566 134.515 31.633 144.181 C 33.571 185.702 60.978 226.173 109.1 224 C 205.316 219.655 250.506 55.5 109.1 58 Z " fill="transparent" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"></path><path d=" M 35.676 112.396 C 36.954 119.969 37.318 129.431 36.013 134 C 34.013 141 25.013 150.5 25.013 159 C 25.013 167.5 31.599 171.398 38.013 163" fill="rgb(253,222,189)" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path><g><path d=" M 148 113.625 C 168.333 92.958 196.107 139.414 153 147.625" fill="rgb(253,222,189)" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path><path d=" M 159.09 128.962 C 157.757 125.296 161.746 121.4 166.09 128.962 C 171.865 139.017 144.402 134.646 154.09 123.962 Q 161.09 116.244 168.09 121.962" fill="none" stroke-width="2" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path></g><path d=" M 118 57 C 120.333 50.333 123.333 34.667 122 28 C 120.667 21.333 111.667 15.333 105 24 C 98.333 32.667 104.963 45.293 114 37 C 121.219 30.375 113.333 25 109 30" fill="none" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path></g></g></g></svg>
</div>

script.js

/*
  This animation was created using svgMotion v1.000-release
  Create yours today at https://michaelsboost.com/svgMotion
*/

function rig(selector, val) {
  val = parseInt(val).toFixed(0);

    document.querySelectorAll(selector).forEach(function(elm, i) {
    elm.style.display = "none";
    elm.style.opacity = "100%";
    
    if (i.toString() === val) {
      elm.style.display = "block";
      elm.style.opacity = "100%";
    }
  });
}

var mainTL = new TimelineMax({
  repeat: -1
});


mainTL.to({}, {
  duration: 0,
  immediateRender: true,
  onStart() {
    rig(".svgmotion > svg > g > g > g", 0);
  },
  onUpdate() {
    rig(".svgmotion > svg > g > g > g", 0);
  }
}, 0.00);
mainTL.to({}, {
  duration: 0.25,
  onStart() {
    rig(".svgmotion > svg > g > g > g:nth-child(1) > g:nth-child(6) > g", 0);
  },
  onUpdate() {
    rig(".svgmotion > svg > g > g > g:nth-child(1) > g:nth-child(6) > g", 0);
  }
}, 0.00);
mainTL.to({}, {
  duration: 0.25,
  immediateRender: true,
  onUpdate() {
    rig(".svgmotion > svg > g > g > g:nth-child(1) > g:nth-child(6) > g", 1);
  }
}, 0.25);
mainTL.to({}, {
  duration: 0.25
}, 0.50);
// eyes
mainTL.to('.svgmotion > svg > g > g > g:nth-child(1) > g:nth-child(4), .svgmotion > svg > g > g > g:nth-child(1) > g:nth-child(5)', {
  y: -17,
  scaleY: 1.65,
  transformOrigin: 'center center',
  // eases: none, power1, power2, power3, power4, back, elastic, bounce, rough, slow, steps, circ, expo, and sine
  ease: 'none',
  duration: 0.25
}, 0.00)
mainTL.to('.svgmotion > svg > g > g > g:nth-child(1) > g:nth-child(4), .svgmotion > svg > g > g > g:nth-child(1) > g:nth-child(5)', {
  y: -17,
  scaleY: 1.452,
  transformOrigin: 'bottom center',
  // eases: none, power1, power2, power3, power4, back, elastic, bounce, rough, slow, steps, circ, expo, and sine
  ease: 'none',
  duration: 0.25
}, 0.25)
// eyebrows
mainTL.to('.svgmotion > svg > g > g > g:nth-child(1) > path:nth-child(2), .svgmotion > svg > g > g > g:nth-child(1) > path:nth-child(3)', {
  y: -32,
  transformOrigin: 'center center',
  // eases: none, power1, power2, power3, power4, back, elastic, bounce, rough, slow, steps, circ, expo, and sine
  ease: 'none',
  duration: 0.25
}, 0.00)
.to('.svgmotion > svg > g > g > g:nth-child(1) > path:nth-child(2), .svgmotion > svg > g > g > g:nth-child(1) > path:nth-child(3)', {
  y: -24,
  transformOrigin: 'center center',
  // eases: none, power1, power2, power3, power4, back, elastic, bounce, rough, slow, steps, circ, expo, and sine
  ease: 'none',
  duration: 0.25
}, 0.25)
// head
mainTL.to('.svgmotion > svg > g > g > g:nth-child(1) > path:nth-child(1)', {
  // eases: none, power1.in, power2.out, power3.inOut, power4, back, elastic, bounce, rough, slow, steps, circ, expo, and sine
  ease: 'none',
  duration: 0.25,
  attr: {d: "M116,46.72C-3.579,48.659,7.048,258.288,112.567,253.915,217.344,249.564,261.661,35.392,116,46.72"}
}, 0.00)
mainTL.to('.svgmotion > svg > g > g > g:nth-child(1) > path:nth-child(1)', {
  // eases: none, power1.in, power2.out, power3.inOut, power4, back, elastic, bounce, rough, slow, steps, circ, expo, and sine
  ease: 'none',
  duration: 0.25,
  attr: {d: " M 116 58 C -3.579 59.941 10.5 228.375 116 224 C 220.785 219.655 270 55.5 116 58 Z "}
}, 0.25)
// hair
mainTL.to('.svgmotion > svg > g > g > g:nth-child(1) > path:nth-child(9)', {
  y: -12,
  transformOrigin: 'bottom center',
  ease: 'none',
  duration: 0.25,
  attr: {d: "M118,57C120.333,50.333,117.039,34.816,110.201,29.378,104.877,25.143,98.783,24.056,93.966,30.277,87.27,38.918,89.636,44.3,97.602,46.341,104.964,48.227,114.229,44.9,102.409,36.734"}
}, 0.00)
mainTL.to('.svgmotion > svg > g > g > g:nth-child(1) > path:nth-child(9)', {
  y: 0,
  transformOrigin: 'bottom center',
  ease: 'none',
  duration: 0.25,
  attr: {d: "M118,57C120.333,50.332,123.333,34.667,122,28,120.667,21.333,111.667,15.333,105,24,98.333,32.667,104.963,45.293,114,37,121.219,30.375,113.333,25,109,30"}
}, 0.25)

// nose
mainTL.to('.svgmotion > svg > g > g > g:nth-child(1) > path:nth-child(7)', {
  x: -1,
  y: -4,
  rotation: 1,
  transformOrigin: 'center center',
  ease: 'none',
  duration: 0.25
}, 0.00)
mainTL.to('.svgmotion > svg > g > g > g:nth-child(1) > path:nth-child(7)', {
  x: 0,
  y: 0,
  rotation: 0,
  transformOrigin: 'center center',
  ease: 'none',
  duration: 0.25
}, 0.25)
// ear
mainTL.to('.svgmotion > svg > g > g > g:nth-child(1) > g:nth-child(8)', {
  x: -2,
  y: -9,
  rotation: -3,
  transformOrigin: 'center center',
  ease: 'none',
  duration: 0.25
}, 0.00)
mainTL.to('.svgmotion > svg > g > g > g:nth-child(1) > g:nth-child(8)', {
  x: 0,
  y: 0,
  rotation: 0,
  transformOrigin: 'center center',
  ease: 'none',
  duration: 0.25
}, 0.25)
// closed mouth
mainTL.to('.svgmotion > svg > g > g > g:nth-child(1) > g:nth-child(6) > g:nth-child(1) > path', {
  x: -5,
  y: 12,
  rotation: 0,
  transformOrigin: 'center center',
  ease: 'none',
  duration: 0.25
}, 0.00)
mainTL.to('.svgmotion > svg > g > g > g:nth-child(1) > g:nth-child(6) > g:nth-child(1) > path', {
  x: 0,
  y: 0,
  rotation: 0,
  transformOrigin: 'center center',
  ease: 'none',
  duration: 0.25
}, 0.25)
// open mouth
mainTL.to('.svgmotion > svg > g > g > g:nth-child(1) > g:nth-child(6) > g:nth-child(2) > path', {
  x: -5,
  y: 12,
  scale: 1.15,
  rotation: 14,
  transformOrigin: 'center center',
  ease: 'none',
  duration: 0.25
}, 0.00)
mainTL.to('.svgmotion > svg > g > g > g:nth-child(1) > g:nth-child(6) > g:nth-child(2) > path', {
  x: 0,
  y: 0,
  scale: 1,
  rotation: 0,
  transformOrigin: 'center center',
  ease: 'none',
  duration: 0.25
}, 0.25)

var fps = 30;
var duration = mainTL.duration();
var frames = Math.ceil(duration / 1 * fps);
mainTL.play(0).timeScale(1);

scripts

<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>

style.css

html, body, .svgmotion, svg {
  width: 100%;
  height: 100%;
  margin: 0;
}
body {
  background: rgb(32, 169, 91);
}