Movie Review Slider & Popcorn Machine

index.html

<canvas id="canvas"></canvas>
<svg id="demo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1500 1200">
  <title>Movie Review Slider and Popcorn Machine</title>
  <defs>

<clipPath id="theClipPath">
   <circle cx="750" cy="400" r="350" fill="#fff"/>
</clipPath>  
</defs> 
<circle cx="750" cy="400" r="350" fill="#fff"/>



  <g id="body" clip-path="url(#theClipPath)">
    <path id="base" d="M749.43,241.1c118.36,0,216.55,83.33,246.38,192.09a29.24,29.24,0,0,1,10.11-4.42c18.31-4.12,37.12,10.23,42,32s-6,42.81-24.29,46.92a29.27,29.27,0,0,1-13.9-.28c11.39,88.46,6.75,183.82-15.41,267.66C944.67,963,539.86,951.38,505.83,768.23c-15.58-83.87-24.84-174.7-15.94-260.7a29.16,29.16,0,0,1-13.53.19c-18.32-4.11-29.19-25.13-24.3-46.92s23.72-36.15,42-32a29.22,29.22,0,0,1,9,3.68C533.16,322.42,632.45,241.1,749.43,241.1Z" fill="#f37a54" fill-rule="evenodd"/>
    <path id="shirt" d="M1015.37,625.9c-1.64,51.19-8.56,102-21,149.2C944.67,963,539.86,951.38,505.83,768.23c-8.78-47.28-15.55-96.77-18.2-146.36C538.33,637.9,734.15,688.82,1015.37,625.9Z" fill-rule="evenodd"/>

    <path id="nose" d="M724.69,536c-21.52,19.71.23,45.58,23.32,46.43,28.41,1.05,47.24-30.51,23-50.53,29.55,16.25,12.77,57.68-23.34,57-19.52-.34-35.17-15.14-36.18-30.32C711,550.39,714.18,539.39,724.69,536Z" fill="#3d3838"/>
    <ellipse id="leftEye" cx="676.04" cy="470.21" rx="52.6" ry="67.16" fill="#fff"/>
    <path id="rightEye" d="M820.07,403c29,0,52.6,30.08,52.6,67.17s-23.55,67.16-52.6,67.16-52.59-30.08-52.59-67.16S791,403,820.07,403Z" fill="#fff" fill-rule="evenodd"/>

  </g>
    <circle cx="750" cy="400" r="350" fill="none" stroke="#ebbb4a" stroke-width="20"/>
  <circle cx="750" cy="400" r="350" fill="none" stroke="#f7ee8b" stroke-width="10" opacity="0.60"/>
  <circle cx="750" cy="400" r="350" fill="none" stroke="#fff" stroke-width="4"opacity="0.45"/>

<!--   mouth shapes start -->
   <g id="masterFace" class="faceShapes">

    <path id="rightPupilHeart" d="M795.86,501.81c-7.5-7.5-14.6-16.4-16-27.28-.78-6.28.82-12.9,5.48-17.5,11.29-11.29,31.05-3.08,33.9,9.46a19.48,19.48,0,0,1,7.3-11.75c10-7.12,26.17-3.53,30.88,8.32,3.75,9.45-.16,20.35-5.56,28.32-5.95,8.77-14.19,15.82-23,21.59a96.1,96.1,0,0,1-9.59,5.53A92.83,92.83,0,0,1,795.86,501.81Z" fill="#3d3838" fill-rule="evenodd"/>
    <path id="leftPupilHeart" d="M653,501.81c-7.5-7.5-14.6-16.4-16-27.28-.78-6.28.82-12.9,5.48-17.5,11.29-11.29,31-3.08,33.9,9.46a19.39,19.39,0,0,1,7.3-11.75c10-7.12,26.16-3.53,30.87,8.32,3.75,9.45-.16,20.35-5.56,28.32-5.95,8.77-14.2,15.82-23,21.59a95.13,95.13,0,0,1-9.6,5.53A92.78,92.78,0,0,1,653,501.81Z" fill="#3d3838" fill-rule="evenodd"/>
  </g>
  <g id="amazingFace" class="faceShapes">>
       <path id="mouth4" d="M592.62,531.28c78.91,82,231.61,82.89,312.41,0,2.4-2.47,6,3.4,7.69,6.45-71.07,128.73-261.3,120.35-326.84,2C584.53,537.31,589.27,534.05,592.62,531.28Z" fill="#3d3838"/>
    <path id="mouth4a" d="M748.12,593.09c58.14.12,116.51-20.37,156.91-61.81,2.4-2.47,6,3.4,7.69,6.45-71.07,128.73-261.3,120.35-326.84,2-1.35-2.45,3.39-5.71,6.74-8.48,39.46,41,97.36,61.7,155.5,61.81" fill="#3d3838"/>

   
  </g>
  <g id="averageFace" class="faceShapes">>
    
    <path id="mouth3" d="M613.46,554.81l6.92-3.32c18,74.75,156.89,53.25,206.93,44.87C773.44,621.67,632.82,635.29,613.46,554.81Z" fill="#3d3838"/>


  </g>
  <g id="boringFace" class="faceShapes">>
    <path id="mouth2" d="M808.3,623.41c-31.77-26.25-89.06-15.54-118.13,9.56C709.48,592.48,794.07,583.65,808.3,623.41Z" fill="#3d3838"/>

  </g>
  <g id="turdFace">
    <path id="rightPupil" d="M820.07,436.42c14.62,0,26.46,15.13,26.46,33.79S834.69,504,820.07,504s-26.45-15.13-26.45-33.78a41.78,41.78,0,0,1,2-13l19.71,7-12.45-19.66C807.55,439.46,813.53,436.42,820.07,436.42Z" fill="#3d3838" fill-rule="evenodd"/>
    <path id="leftPupil" d="M676,436.42c14.61,0,26.45,15.13,26.45,33.79S690.65,504,676,504s-26.46-15.13-26.46-33.78a41.78,41.78,0,0,1,2-13l19.71,7-12.45-19.66C663.51,439.46,669.5,436.42,676,436.42Z" fill="#3d3838" fill-rule="evenodd"/>
    <path id="mouth1" d="M777.34,613.36c-27.23-17.27-51.72,2.58-51.79,2.64C731.6,594.63,766.71,591.91,777.34,613.36Z" fill="#3d3838"/>
  </g>
  <g id="eyelids" fill="#f37a54">
    <path id="rightEyelid" d="M816.74,371.44c-35.26,1.44-62.35,39.09-60.51,84.06.11,2.54.3,5,.59,7.51L884,457.81c.08-2.49.07-5,0-7.53C882.07,405.31,852,370,816.74,371.44Z" fill-rule="evenodd"/>
    <path id="leftEyelid" d="M679.45,371.44c35.22,1.44,62.3,39.09,60.46,84.06-.1,2.54-.3,5-.58,7.51l-127-5.2c-.07-2.49-.06-5,0-7.53C614.17,405.31,644.23,370,679.45,371.44Z"  fill-rule="evenodd"/>
  </g> 
      <path id="hair" d="M503,432.87c27.67-3.17,91.84-30.64,107.29-134.56,74.42,84.44,224,69.84,325.31,71.21,6.88,19,26.49,54.14,60.19,63.41C965.82,324.29,867.7,241.1,749.43,241.1,632.3,241.1,532.91,322.63,503,432.87Z" fill="#3d3838" fill-rule="evenodd"/> 
        <path id="leftEyebrow" d="M625.62,395.17s51.79,12.95,80.92-7.28l-8.9-26.71S687.93,387.89,625.62,395.17Z" fill="#3d3838" fill-rule="evenodd"/>
    <path id="rightEyebrow" d="M868.27,395.17s-51.84,12.95-81-7.28l8.91-26.71S805.9,387.89,868.27,395.17Z" fill="#3d3838" fill-rule="evenodd"/>

 
      <path id="mouth3Hook" d="M635.82,554.93c-17.64-5.07-26.81,4.21-33.71,13.55C603.1,546.08,624.32,541.31,635.82,554.93Z" fill="#3d3838"/>

      <path id="leftMouthHook4" d="M608.14,531.74c-18,1.47-23.27,13.23-26.38,24.25C574.87,535,592.77,523.18,608.14,531.74Z" fill="#3d3838"/>
    <path id="rightMouthHook4" d="M891.14,531.72c18,1.48,23.24,13.24,26.34,24.26C924.37,535,906.48,523.17,891.14,531.72Z" fill="#3d3838"/>
  
<!--  beret start  -->
  <g id="beret">
      <path d="M552.25,237.53c-9.37,5-18.24,9.94-26.72,14.93l27,90.56c95.1-57.35,137.89-76.24,321.53-31.84a31.23,31.23,0,0,0,38.57-29.64L914.36,205Z" fill="#212121" fill-rule="evenodd"/>
      <path d="M640.07,144c-192.62,111.36-169,260.57-118.2,228.37,101.32-64.26,172.71-174.19,361.3-96.05C1048.49,344.81,994.94-55,640.07,144Z" fill-rule="evenodd"/>
      <g>
        <path d="M677.75,147.4s-37.27-21-31.24-43.7S674,72.27,682.4,88.49s13.65,54.09,6.09,59.16S677.75,147.4,677.75,147.4Z" fill-rule="evenodd"/>
        <path d="M669.69,136.3S643.87,121.78,648.05,106s19-21.77,24.86-10.53,9.45,37.46,4.22,41S669.69,136.3,669.69,136.3Z" fill="#1a1a1a" fill-rule="evenodd"/>
        <path d="M662.57,126.19s-14.36-8.08-12-16.84,10.58-12.11,13.83-5.86,5.26,20.84,2.35,22.79S662.57,126.19,662.57,126.19Z" fill="#212121" fill-rule="evenodd"/>
      </g>
      <g>
        <path d="M657.49,146.52c-54.73,31-113.18,78.67-137.06,138.86-5.83,14.68-10.52,33.12-8.59,49,.34,2.8,2.5,13.43,5.82,14.58,1.06.36,4.18-1.37,5-1.87,15.53-9.85,30.34-20.81,45-32,25.11-19.14,49.8-38.9,76.86-55.31,33.65-20.41,68.4-33.9,107.86-37.4,50.36-4.45,100.25,8.18,146.49,27.34,16.08,6.66,37.85,11.52,52.4-1.17,14.08-12.28,16.11-35.27,13.75-52.57-3.66-26.73-17.87-51.88-37.81-69.87-27-24.39-62.43-34.33-98.29-34.29C769.7,92,708.08,117.84,657.49,146.52Z" fill="#1a1a1a" fill-rule="evenodd"/>
        <path d="M532.69,317.71c10.23-7.07,20.2-14.52,30.08-22,25.6-19.52,50.69-39.56,78.28-56.29C730.32,185.24,815,188.85,910,228.2c9.27,3.84,26.64,9.37,35.56,1.59,9.42-8.21,9.89-26.94,8.35-38.18-3.14-22.94-15.52-44.62-32.61-60.05C852.88,69.82,738,115.7,670.47,154c-47.69,27-97.09,66.11-123,115.59-7,13.28-12.86,28.7-14.47,43.71C532.87,314.38,532.76,315.94,532.69,317.71Z" fill="#212121" fill-rule="evenodd"/>
      </g>
    </g>
  
  
<rect x="0" y="950" width="300" height="140" fill="#b57e1d"/>
<rect x="300" y="950" width="300" height="140" fill="#CD5C5C"/>
<rect x="600" y="950" width="300" height="140" fill="#8cc63f"/>  
<rect x="900" y="950" width="300" height="140" fill="#29abe2"/>    
<rect x="1200" y="950" width="300" height="140" fill="#93278f"/>
  
<text  transform="translate(750 850)" text-anchor="middle" font-size="54.1" fill="#fff">Please rate the last movie you watched.</text>
  <text transform="translate(750 900)" text-anchor="middle" font-size="30" fill="#fff">Caution: Your review may affect the director's emotional state.</text>
  
  <text  transform="translate(1450 1176)" text-anchor="end" font-size="24" fill="#fff" opacity="0.5">Drag or throw the popcorn container.</text>
  <g font-size="40" fill="#fff">
  <text transform="translate(150 1000)" text-anchor="middle">Boo!</text>
  <text transform="translate(450 1000)" text-anchor="middle">Boooring</text>
  <text transform="translate(750 1000)" text-anchor="middle">Pretty Good</text>
  <text transform="translate(1050 1000)" text-anchor="middle">Amazing</text>
  <text transform="translate(1350 1000)" text-anchor="middle">Superstar !</text>
</g>
       
<g id="twoStars">
        <polygon points="718 1020 725.77 1035.74 743.14 1038.27 730.57 1050.52 733.54 1067.82 718 1059.65 702.46 1067.82 705.43 1050.52 692.86 1038.27 710.23 1035.74 718 1020" fill="#fff" fill-rule="evenodd"/>
        <polygon points="782 1020 789.77 1035.74 807.14 1038.27 794.57 1050.52 797.54 1067.82 782 1059.65 766.46 1067.82 769.43 1050.52 756.86 1038.27 774.23 1035.74 782 1020" fill="#fff" fill-rule="evenodd"/>
      </g>
      <g id="oneStar">
        <polygon points="450 1020 457.77 1035.74 475.14 1038.27 462.57 1050.52 465.54 1067.82 450 1059.65 434.46 1067.82 437.43 1050.52 424.86 1038.27 442.23 1035.74 450 1020" fill="#fff" fill-rule="evenodd"/>
      </g>
      <g id="fourStars">
        <polygon points="1267 1020 1274.77 1035.74 1292.14 1038.27 1279.57 1050.52 1282.54 1067.82 1267 1059.65 1251.46 1067.82 1254.43 1050.52 1241.86 1038.27 1259.23 1035.74 1267 1020" fill="#fff" fill-rule="evenodd"/>
        <polygon points="1322.33 1020 1330.1 1035.74 1347.47 1038.27 1334.9 1050.52 1337.87 1067.82 1322.33 1059.65 1306.8 1067.82 1309.76 1050.52 1297.19 1038.27 1314.56 1035.74 1322.33 1020" fill="#fff" fill-rule="evenodd"/>
        <polygon points="1377.67 1020 1385.44 1035.74 1402.81 1038.27 1390.24 1050.52 1393.2 1067.82 1377.67 1059.65 1362.13 1067.82 1365.1 1050.52 1352.53 1038.27 1369.9 1035.74 1377.67 1020" fill="#fff" fill-rule="evenodd"/>
        <polygon points="1433 1020 1440.77 1035.74 1458.14 1038.27 1445.57 1050.52 1448.54 1067.82 1433 1059.65 1417.46 1067.82 1420.43 1050.52 1407.86 1038.27 1425.23 1035.74 1433 1020" fill="#fff" fill-rule="evenodd"/>
      </g>
      <g id="threeStars">
        <polygon points="988.5 1020 996.27 1035.74 1013.64 1038.27 1001.07 1050.52 1004.04 1067.82 988.5 1059.65 972.96 1067.82 975.93 1050.52 963.36 1038.27 980.73 1035.74 988.5 1020" fill="#fff" fill-rule="evenodd"/>
        <polygon points="1050 1020 1057.77 1035.74 1075.14 1038.27 1062.57 1050.52 1065.54 1067.82 1050 1059.65 1034.46 1067.82 1037.43 1050.52 1024.86 1038.27 1042.23 1035.74 1050 1020" fill="#fff" fill-rule="evenodd"/>
        <polygon points="1111.5 1020 1119.27 1035.74 1136.64 1038.27 1124.07 1050.52 1127.04 1067.82 1111.5 1059.65 1095.96 1067.82 1098.93 1050.52 1086.36 1038.27 1103.73 1035.74 1111.5 1020" fill="#fff" fill-rule="evenodd"/>
      </g>
    <g id="turd">
    <path d="M164.12,1041.34s5.59-6.6-1.49-12.79c-4.13-3.61-10.58-2.28-13.38-9.91-1.14-3.09-6.93,5.51-6.11,14.27C143.85,1040.38,160.16,1046.89,164.12,1041.34Z" fill="#884b1f"/>
    <path d="M172.08,1047.32c2,1.47,4.67,7.26,0,10.4S138.2,1044,133.29,1044s-3.73-10.19,4-10.1C143.94,1034,157.14,1036.51,172.08,1047.32Z" fill="#a06334"/>
    <path d="M121.37,1069.67c0,8.12,6.43,11.52,24.42,11.52,20.55,0,30.22.94,30.18-11.52,0-6.36-14.58-11.52-30.18-11.52S121.37,1059.65,121.37,1069.67Z" fill="#884b1f"/>
    <path d="M176.25,1066.61s8.32,11.62-6.14,13.44c-19.45,2.44-34.45-14.75-43.78-17-3.56-.86-3.75-12.9,3.93-11.5C142,1053.68,155.57,1068.11,176.25,1066.61Z" fill="#a06334"/>
    <path d="M173.75,1057.56c4.95.81,9.17,14-4.81,12-15.87-2.35-32.44-15.17-40.07-17.17-2.9-.76-3.26-10,2.21-10C140.88,1042.31,157.07,1054.8,173.75,1057.56Z" fill="#884b1f"/>
  </g>
  <line x1="150" y1="1140" x2="1350" y2="1140" stroke-width="12" stroke="#fff" stroke-linecap="round"/>

      <g id="dragger">

          <path d="M786.16,1096.56a4.47,4.47,0,0,0-3.31-4.31,3.25,3.25,0,0,0,.4-1.58,3.33,3.33,0,0,0-3.33-3.33,3.27,3.27,0,0,0-2.19.83v0a4.45,4.45,0,0,0-1.2-3,4.89,4.89,0,0,0-4.84-4.21,4.82,4.82,0,0,0-2.71.83,9.64,9.64,0,0,0,.06-1.08.66.66,0,0,0,0-.14,3.19,3.19,0,0,0,1,.15,3.23,3.23,0,1,0-2.62-5.09,3.44,3.44,0,0,0-.28-.36,3.33,3.33,0,0,0-2.14-5.89,3.3,3.3,0,0,0-2.77,1.49,4.52,4.52,0,0,0-2.17-1.33,4.47,4.47,0,1,0-8.28,3.25,4.17,4.17,0,0,0-1.57,4.76,2,2,0,0,0-.23.06c0-.08,0-.14,0-.22a5.36,5.36,0,0,0-10.45-1.7,2.91,2.91,0,0,0-.39-.12,4.48,4.48,0,0,0-8.64-.41,3.84,3.84,0,0,0-6.26,3,3.59,3.59,0,0,0,.09.81,7.53,7.53,0,0,0-1.35-.13c-3.23,0-5.85,2.12-5.85,4.71a4.34,4.34,0,0,0,1.86,3.44,12.54,12.54,0,0,0-1.84,6.1,32.15,32.15,0,0,1-1.5,8.08,3.34,3.34,0,0,0,3.33,3.34,3.74,3.74,0,0,0,1-.16,7.91,7.91,0,0,0-.24,1.9,7.82,7.82,0,0,0,15.39,1.95,20.51,20.51,0,0,0,7.81-1.62,5.68,5.68,0,0,0,0,.59,6.5,6.5,0,1,0,13,0c0-.15,0-.31,0-.46a5.07,5.07,0,0,0,.55,0,5.15,5.15,0,0,0,4.86-3.43,6.45,6.45,0,0,0,11.57-1.14,6.24,6.24,0,0,0,.75-.16,5.53,5.53,0,1,0,10.72,1.92,5.52,5.52,0,0,0-1-3.13A4.49,4.49,0,0,0,786.16,1096.56Zm-20.79-6.14,0,0,.12-.18h0Z" fill="#ffc300"/>
          <g>
            <path d="M732.91,1084.92c.29,2-1.7,3.92-4.45,4.32s-5.2-.89-5.49-2.88,1.71-3.92,4.45-4.32S732.62,1082.93,732.91,1084.92Z" fill="#fe7e11" opacity="0.4" style="mix-blend-mode: multiply"/>
            <path d="M767.15,1083.79c.11,1.76-1.77,3.29-4.19,3.44s-4.46-1.16-4.57-2.91,1.77-3.29,4.19-3.44S767.05,1082,767.15,1083.79Z" fill="#fe7e11" opacity="0.4" style="mix-blend-mode: multiply"/>
            <path d="M750.22,1095.7c.24,1.73-1.51,3.41-3.91,3.74s-4.54-.82-4.78-2.56,1.52-3.41,3.92-3.74S750,1094,750.22,1095.7Z" fill="#fe7e11" opacity="0.4" style="mix-blend-mode: multiply"/>
            <path d="M779.89,1100.5c.24,1.74-1.51,3.42-3.91,3.74s-4.54-.81-4.78-2.55,1.52-3.42,3.92-3.74S779.66,1098.76,779.89,1100.5Z" fill="#fe7e11" opacity="0.4" style="mix-blend-mode: multiply"/>
          </g>

        <g>
          <g>
            <polygon points="775.08 1173.72 724.98 1173.76 714.38 1102.15 783.75 1102.09 775.08 1173.72" fill="#fcf1e6"/>
            <polygon points="726.92 1102.13 734.03 1173.75 738.95 1173.75 734.02 1102.13 726.92 1102.13" fill="#e3372d"/>
            <polygon points="713.9 1102.15 724.99 1173.76 729.91 1173.75 721 1102.14 713.9 1102.15" fill="#e3372d"/>
            <polygon points="739.94 1102.13 743.07 1173.74 748 1173.74 747.03 1102.12 739.94 1102.13" fill="#e3372d"/>
            <polygon points="752.96 1102.12 752.11 1173.74 757.03 1173.73 760.06 1102.11 752.96 1102.12" fill="#e3372d"/>
            <polygon points="765.98 1102.11 761.14 1173.73 766.08 1173.72 773.08 1102.1 765.98 1102.11" fill="#e3372d"/>
            <polygon points="779 1102.1 770.19 1173.72 775.12 1173.72 786.1 1102.09 779 1102.1" fill="#e3372d"/>
          </g>
          <rect x="712.1" y="1101.09" width="75.8" height="2.49" fill="#e3372d"/>
          <rect x="723.57" y="1172.51" width="52.87" height="2.49" fill="#e3372d"/>
        </g>
      </g>
  <rect x="5" y="5" width="1490" height="1190" fill="none" stroke="#d1d2d4" stroke-width="10"/>
</svg>

movie-review-slider-popcorn-machine.markdown

Movie Review Slider & Popcorn Machine

The summer movie season is here. Rate the movie and make some popcorn. The director is fragile so he may react to your review.

A Pen by Bojan on CodePen.

License.

script.js

console.clear();
TweenLite.defaultEase = Linear.easeNone;
CustomEase.create("popUp", "M0,0,C0,0.91,0.288,1,1,1");
CustomEase.create("popDown", "M0,0,C0.532,0,0.924,0.862,1,1");
PIXI.utils.skipHello();

var mood = new TimelineMax({paused:true});
var ratio = 0.8;
var theKernels = [];
var baseUrl = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/314556/";

TweenMax.set("#mouth3Hook, #leftMouthHook4, #rightMouthHook4", {scale:0, autoAlpha:0, transformOrigin:"center center"});
TweenMax.set("#rightEyebrow", {rotation:-30, transformOrigin:"center bottom"});
TweenMax.set("#leftEyebrow", {rotation:30, transformOrigin:"center bottom"});
TweenMax.set("#demo, #canvas", { xPercent: -50, yPercent: -50, autoAlpha: 1 });

mood.add("boring");
mood.to("#leftPupil, #rightPupil", 1, {y:34},"boring");
mood.to("#mouth1", 1, {morphSVG:"#mouth2"},"boring");
mood.to("#rightEyelid", 1, {rotation:9, y:8, transformOrigin:"right bottom"}, "boring");
mood.to("#leftEyelid", 1, {rotation:-9, y:8, transformOrigin:"left bottom"}, "boring");
mood.to("#leftEyebrow, #rightEyebrow", 1, {rotation:0}, "boring");
mood.add("average");
mood.to("#leftPupil, #rightPupil", 1, {y:0},"average");
mood.to("#rightEyelid", 1, {rotation:0, y:-66, transformOrigin:"right bottom"}, "average");
mood.to("#leftEyelid", 1, {rotation:0, y:-66, transformOrigin:"left bottom"}, "average");
mood.to("#mouth1", 1, {morphSVG:"#mouth3"},"average");
mood.to("#mouth3Hook", 0.15, {scale:1, autoAlpha:1}, "average+=0.85");
mood.add("amazing");
mood.to("#mouth1", 1, {morphSVG:"#mouth4a"},"amazing");
mood.to("#mouth1", 0.5, {y:10, yoyo:true, repeat:1},"amazing");
mood.to("#mouth3Hook", 0.10, {scale:0, autoAlpha:0}, "amazing");
mood.to("#leftMouthHook4, #rightMouthHook4", 0.15, {scale:1, autoAlpha:1}, "amazing+=0.85");
mood.to("#leftEyebrow, #rightEyebrow", 1, {y:-7}, "amazing");
mood.add("masterpiece");
mood.to("#mouth1", 1, {morphSVG:"#mouth3"},"masterpiece");
mood.to("#mouth1", 0.5, {y:10, yoyo:true, repeat:1},"masterpiece");
mood.to("#leftMouthHook4, #rightMouthHook4", 0.1, {scale:0, autoAlpha:0}, "masterpiece");
mood.to("#mouth3Hook", 0.15, {scale:1, autoAlpha:1}, "masterpiece+=0.85");
mood.to("#leftPupil", 1, {morphSVG:"#leftPupilHeart"},"masterpiece");
mood.to("#rightPupil", 1, {morphSVG:"#rightPupilHeart"},"masterpiece");
mood.to("#leftEyelid, #rightEyelid", 1, {y:-8},"masterpiece");
mood.progress(0.5);


// let's make a popcorn popper with Pixi
var app = new PIXI.Application(1500, 1200, {
  view: document.querySelector("#canvas"),
  backgroundColor : 0x000000
});

var loader = new PIXI.loaders.Loader(baseUrl)
.add("popSheet", "popcornSprite.png")
.load(init);

function init(loader, resources) {
  var baseTexture =  resources.popSheet.texture; 
  for (k = 0; k < 5; k++) {
    theKernels.push(new PIXI.Texture(baseTexture, new PIXI.Rectangle(k*100, 0, 100, 100)));
  }
var popcornContainer = new PIXI.Container();
app.stage.addChild(popcornContainer);

  function popIt() {
    for (i = 0; i < 3; i++) {
      var kernel = Math.floor(Math.random() * theKernels.length);
      var tl = new TimelineMax({delay:random(0, 0.5)});
      var targetX = random(0, 1500);
      var pop = new PIXI.Sprite(theKernels[kernel]);
      popcornContainer.addChild(pop);
      TweenMax.set(pop, {
        pixi: {
          scale: 0.1,
          rotation: random(-60, 60),
          anchor:0.5
         },
        x: 750,
        y: 1300
      });
      tl.to(pop, random(0.4, 0.8), {
        pixi:{
          y:random(-100, 300),
          x: targetX,
          rotation: random(-90, 90),
          scale:random(0.4, 1)
        },
        ease:"popUp"
      });
        tl.to(pop, random(1.2,1.6), {
        pixi:{
          y:random(1300, 1500),
          x:random(targetX-10, targetX+10),
          rotation: random(-90, 90)
        },
        ease:Power1.easeIn,
        onComplete:eatPopcorn
      });
    } // end loop
  } // end popIt

  Draggable.create("#dragger", {
  type: "x",
  bounds: {
    minX:-600,
    maxX:600
  },
    throwProps:true,
    maxDuration: 0.5,
    edgeResistance:1,
    snap:[-600, -300, 0, 300, 600],
  onDrag: onDrag,
  onThrowUpdate: onDrag
});

function onDrag() {
  popIt();
  mood.progress(0.5 + this.x / 1200);
}
  
function random(min, max) {
  return min + (max - min) * Math.random();
}

function eatPopcorn() {
  this.target.destroy();
}  
  
function newSize() {
  var w = Math.floor(window.innerWidth * 0.92);
  var h = Math.floor(window.innerHeight * 0.92);
  if (h / w >= ratio) {
    TweenMax.set("#demo", { attr: { width: w, height: w * ratio } });
    app.renderer.resize(w, w * ratio);
    newScale = w / 1500;
  } else {
    TweenMax.set("#demo", { attr: { width: h / ratio, height: h } });
    app.renderer.resize(h / ratio, h);
    newScale = h / 1200;
  }
 TweenMax.set(popcornContainer, { pixi: { scale: newScale } });
}

newSize();
window.addEventListener("resize", newSize);
 
} // end init

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/utils/Draggable.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.3/pixi.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/plugins/PixiPlugin.min.js"></script>

style.css

body {
  padding: 0;
  margin: 0;
  background: #000;
}

#demo {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;

}

svg, #canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0;
}

.faceShapes {
  visibility: hidden;
}

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&amp;#39;" rel="stylesheet" />

Attaching all files and exporting them