Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                .smash
  svg.hulk(xmlns='http://www.w3.org/2000/svg' viewbox='0 0 77.0489 76.3117')
    g.hulk__body
      path.hulk__torso.hulk__body-part(d='M31.9442 17.561c-4.0288 0-8.297 1.7148-11.5957 4.2395a8.2185 8.2185 0 00-3.2536-.6744 8.2185 8.2185 0 00-8.2186 8.2181 8.2185 8.2185 0 008.2186 8.2186 8.2185 8.2185 0 00.8796-.0568c17.092 17.6507 3.7715 17.6538 13.9697 17.6538h13.1826c10.2476 0-3.2564-.0006 15.6161-17.6543a8.2185 8.2185 0 007.3334-8.1612 8.2185 8.2185 0 00-8.2186-8.2181 8.2185 8.2185 0 00-3.2313.6718c-3.4377-2.504-7.6529-4.237-11.4996-4.237z' fill='green' stroke='#250' stroke-width='1.1631' stroke-linecap='round' stroke-linejoin='round')
      path.hulk__body-part(d='M21.8389 34.5244c0 2.3617 3.829 4.2762 8.5524 4.2762 3.6562-.002 6.9056-1.1657 8.0858-2.896 1.18 1.73 4.4286 2.8938 8.0843 2.896 4.7233 0 8.5523-1.9145 8.5524-4.2762a2.1682 2.1682 0 00-.0268-.2672' fill='none' stroke-width='1.3229' stroke-linecap='round' stroke-linejoin='round')
      g.hulk__body-part(fill='none' stroke-width='1.3229' stroke-linecap='round' stroke-linejoin='round')
        path(d='M33.2174 46.431c0 1.1483.9307 2.079 2.0789 2.079s2.079-.9307 2.079-2.079a2.074 2.074 0 00-.0104-.189M43.7353 47.0939c0 1.1482-.9308 2.079-2.079 2.079s-2.079-.9308-2.079-2.079a2.0527 2.0527 0 01.0104-.1891M33.2174 42.8176c0 1.1482.9307 2.079 2.0789 2.079s2.079-.9308 2.079-2.079a2.074 2.074 0 00-.0104-.1892M43.4734 43.3468c0 1.1481-.9308 2.079-2.079 2.0789-1.1482 0-2.079-.9308-2.079-2.079a2.0527 2.0527 0 01.0104-.189M33.6129 50.1729c0 1.1481.9307 2.079 2.079 2.0789 1.1481 0 2.079-.9308 2.0789-2.079a2.074 2.074 0 00-.0104-.189M43.6016 50.702c0 1.1482-.9307 2.079-2.079 2.079-1.148 0-2.0789-.9308-2.0789-2.079a2.0527 2.0527 0 01.0104-.1891')
    g.hulk__back(transform='translate(-44.0242 -169.4513)')
      //- path.hulk__traps(d='M70.1634 186.7642l-.5292 5.6436c-.234 2.4967 2.0187 4.5263 4.5264 4.5263h16.6966c2.5076 0 4.5263-2.0187 4.5263-4.5263l-.5291-5.6436z')
      rect.hulk__back-head(width='24.727' height='19.6548' x='70.1453' y='175.4084' ry='4.3467')
      //- path(d='M75.9094 188.5242l12.9457 1.5119v2.4568H75.9094z' fill='#fff')
      path.hulk__hair(d='M70.1453 175.4084h24.727v5.3862l-1.5455-1.5875-1.5454 1.5875-1.5454-1.5875-1.5455 1.5875-1.5454-1.5875-1.5454 1.5875-1.5455-1.5875-1.5454 1.5875-1.5455-1.5875-1.5454 1.5875-1.5454-1.5875-1.5455 1.5875-1.5454-1.5875-1.5454 1.5875-1.5455-1.5875-1.5454 1.5875z')
      //- g(transform='rotate(-3.274 -919.9827 -909.7377)')
      //-   rect(ry='2.4388' y='243.7465' x='15.2344' height='4.8777' width='5.479')
      //-   path(d='M17.6733 243.7464c-.98 0-1.8193.5736-2.2076 1.4035h5.0163c-.3884-.8299-1.2277-1.4035-2.2077-1.4035z' fill='#fff')
      path.hulk__body-part.hulk__legs(stroke-width='1.3229' stroke-linecap='round' stroke-linejoin='round' d='M72.5113 226.1287h7.994v12.6281h-7.994zM84.8777 226.1287h7.994v12.6281h-7.994z')
      path.hulk__lats.hulk__body-part(d='M75.9683 187.0123c-4.0287 0-8.297 1.7149-11.5956 4.2395a8.2185 8.2185 0 00-3.2536-.6743 8.2185 8.2185 0 00-8.2186 8.218 8.2185 8.2185 0 008.2186 8.2187 8.2185 8.2185 0 00.8795-.0568c17.092 17.6506 3.7716 17.6537 13.9697 17.6537H89.151c10.2475 0-3.2564-.0005 15.6161-17.6542a8.2185 8.2185 0 007.3334-8.1613 8.2185 8.2185 0 00-8.2186-8.218 8.2185 8.2185 0 00-3.2313.6717c-3.4377-2.504-7.6529-4.237-11.4996-4.237z' stroke-width='1.1631' stroke-linecap='round' stroke-linejoin='round')
      path.hulk__shorts(d='M72.143 224.1321c-.0893 0-.1609.0521-.1609.1165v5.0333c0 .009.0042.0166.0067.0248v3.2468c0 .056.0623.1011.14.1011l1.205-1.0583 1.2051 1.0583 1.2051-1.0583 1.205 1.0583 1.2052-1.0583 1.205 1.0583 1.2051-1.0583 1.205 1.0583c.0584.0512.1406-.045.1406-.1011v-3.155h1.5632v3.155c0 .056.0629.1011.1405.1011l1.205-1.0583 1.2052 1.0583 1.205-1.0583 1.2051 1.0583 1.205-1.0583 1.2052 1.0583 1.205-1.0583 1.2051 1.0583c.0583.0512.14-.045.14-.1011v-3.2468c.0025-.008.0067-.016.0067-.0248v-5.0333c0-.0645-.0716-.1165-.1608-.1165z' stroke-width='1.3229' stroke-linecap='round' stroke-linejoin='round')
      g.hulk__body-part.hulk__arms-set(stroke-linecap='round' stroke-linejoin='round')
        path(d='M62.8592 202.0472c.1395.6102.211 1.234.2134 1.8599-.0054 4.5427-3.5865 8.276-8.125 8.4703l-.6693.8738a.265.265 0 01-.3725.0491l-.227-.1736v5.7769a.2649.2649 0 01-.2655.2656h-8.1546a.2653.2653 0 01-.2661-.2656v-12.1641c0-.0958.0531-.1755.1287-.2222-.0315-.083-.0251-.1783.033-.2543l1.0124-1.3219a8.488 8.488 0 01-.0703-1.034c.0052-4.2212 3.1115-7.7972 7.2905-8.3928' stroke-width='1.3229')
        path(d='M44.9591 216.4276a.3042.3042 0 00-.3048.3049v9.3527c0 .169.136.305.3048.305h9.1169a.3042.3042 0 00.3048-.305v-9.3527a.3042.3042 0 00-.3048-.3049' stroke-width='1.2602')
        path(d='M51.5776 216.5356l-3.0736 6.1472 1.871-.2673v-1.2027' stroke-width='1.3229')
        g
          path(d='M102.238 202.0472a8.4882 8.4882 0 00-.2134 1.8599c.0054 4.5427 3.5865 8.276 8.1251 8.4703l.6692.8738a.265.265 0 00.3726.0491l.2269-.1736v5.7769c0 .1472.1183.2656.2656.2656h8.1545a.2653.2653 0 00.2662-.2656v-12.1641c0-.0958-.0532-.1755-.1287-.2222.0314-.083.025-.1783-.033-.2543l-1.0124-1.3219a8.488 8.488 0 00.0702-1.034c-.0052-4.2212-3.1115-7.7972-7.2905-8.3928' stroke-width='1.3229')
          path(d='M120.1381 216.4276c.169 0 .3049.136.3049.3049v9.3527a.3042.3042 0 01-.3049.305h-9.1168a.3042.3042 0 01-.3049-.305v-9.3527c0-.169.136-.3049.3049-.3049' stroke-width='1.2602')
          path(d='M113.5196 216.5356l3.0736 6.1472-1.8709-.2673v-1.2027' stroke-width='1.3229')
      path.hulk__lats.hulk__body-part(d='M80.771 190.6199a33.9318 33.9318 0 00-1.7677.1985 26.6499 26.6499 0 00-1.7625.305c-.5826.122-1.1585.2656-1.7216.4345-.5631.169-1.1136.3632-1.6454.5867-.5318.2235-1.045.4761-1.5336.7618-.4887.2856-.9528.6042-1.3865.9597a9.3085 9.3085 0 00-1.2039 1.1804m25.5013-.0155c-.285-.3443-.6123-.673-.9774-.985-.3651-.3119-.768-.6069-1.2046-.8834-.4365-.2766-.9067-.5347-1.406-.7728-.4995-.2381-1.0282-.4563-1.582-.653a19.5578 19.5578 0 00-1.732-.524 22.1571 22.1571 0 00-1.8565-.386 24.1075 24.1075 0 00-1.9553-.239' fill='green' stroke='#250' stroke-width='1.3229' stroke-linecap='round' stroke-linejoin='round')
    g.hulk__body-part.hulk__legs(stroke-linecap='round' stroke-linejoin='round')
      path(stroke-width='1.3229' d='M28.487 56.6773h7.994v12.6281h-7.994zM40.8536 56.6773h7.994v12.6281h-7.994z')
      g(transform='translate(-93.2283 -160.5738)')
        ellipse(ry='1.6998' rx='1.5676' cy='229.955' cx='122.0863' stroke-width='1.3229')
        ellipse(cx='128.7954' cy='229.2478' rx='2.1107' ry='2.2888' stroke-width='.9195')
        ellipse(cx='124.9684' cy='229.7024' rx='1.7615' ry='1.9101' stroke-width='1.3229')
        ellipse(ry='2.2888' rx='2.1107' cy='229.2478' cx='128.7954' stroke-width='1.3229')
      g(transform='matrix(-1 0 0 1 170.563 -160.5738)')
        ellipse(cx='122.0863' cy='229.955' rx='1.5676' ry='1.6998' stroke-width='1.3229')
        ellipse(ry='2.2888' rx='2.1107' cy='229.2478' cx='128.7954' stroke-width='.9195')
        ellipse(ry='1.9101' rx='1.7615' cy='229.7024' cx='124.9684' stroke-width='1.3229')
        ellipse(cx='128.7954' cy='229.2478' rx='2.1107' ry='2.2888' stroke-width='1.3229')
    g.hulk__head.hulk__head--front(transform='translate(-44.7623 -166.365)')
      path.hulk__chin(d='M70.9015 183.678l-.5292 5.6435c-.234 2.4967 2.0187 4.5264 4.5264 4.5264h16.6966c2.5077 0 4.5264-2.0187 4.5264-4.5264l-.5292-5.6436z' fill='#250')
      rect.hulk__face(ry='4.3467' y='172.3221' x='70.8834' height='19.6548' width='24.727' fill='green')
      g.hulk__eye--left(transform='translate(71.1054 -40.3892)')
        circle.hulk__eye(cx='17.6704' cy='222.7277' r='1.4174')
        circle.hulk__pupil(cx='17.1979' cy='222.3497' r='.4725')
      path.hulk__eyebrow(d='M90.178 178.4642l-5.7641 3.0239' fill='none' stroke-width='1.3229')
      path.hulk__mouth(d='M76.6475 185.438l12.9457 1.5118v2.4569H76.6475z')
      g.hulk__eye--right(transform='translate(60.0014 -40.3892)')
        circle.hulk__eye(cx='17.6704' cy='222.7277' r='1.4174')
        circle.hulk__pupil(cx='17.1979' cy='222.3497' r='.4725')
      path.hulk__eyebrow(d='M76.2696 178.4642l5.7641 3.0239' fill='none' stroke-width='1.3229')
      path.hulk__hair(d='M70.8834 172.3221h24.727v5.3862l-1.5455-1.5875-1.5454 1.5875-1.5454-1.5875-1.5455 1.5875-1.5454-1.5875-1.5454 1.5875-1.5455-1.5875-1.5454 1.5875-1.5454-1.5875-1.5455 1.5875-1.5454-1.5875-1.5454 1.5875-1.5455-1.5875-1.5454 1.5875-1.5455-1.5875-1.5454 1.5875z')
      g.hulk__mouth-scream(transform='rotate(-3.274 -973.6173 -924.1964)')
        rect.hulk__open-mouth(width='5.479' height='4.8777' x='15.2344' y='243.7465' ry='2.4388')
        path.hulk__teeth(d='M17.6733 243.7464c-.98 0-1.8193.5736-2.2076 1.4035h5.0163c-.3884-.8299-1.2277-1.4035-2.2077-1.4035z')
      path.hulk__sweat(d='M94.2125 179.535a.8018.8018 0 11-1.6036 0c0-.4428.359-1.8601.8018-1.8601.4428 0 .8018 1.4173.8018 1.8601z')
    path.hulk__shorts(d='M28.1187 54.6808c-.0892 0-.1608.052-.1608.1165v5.0333c0 .009.0042.0166.0067.0248v3.2467c0 .0561.0624.1012.14.1012l1.205-1.0584 1.2052 1.0584 1.205-1.0584 1.2051 1.0584 1.205-1.0584 1.2052 1.0584 1.205-1.0584 1.2051 1.0584c.0583.0512.1405-.045.1405-.1012v-3.155h1.5632v3.155c0 .0561.0629.1012.1405.1012l1.2051-1.0584 1.205 1.0584 1.2052-1.0584 1.205 1.0584 1.2051-1.0584 1.205 1.0584 1.2051-1.0584 1.2051 1.0584c.0584.0512.14-.045.14-.1012v-3.2467c.0025-.008.0067-.016.0067-.0248v-5.0333c0-.0645-.0715-.1165-.1608-.1165z' fill='purple' stroke='#2b0000' stroke-width='1.3229' stroke-linecap='round' stroke-linejoin='round')
    g.hulk__arms.hulk__arms--flight-mode.hulk__body-part
      g(stroke-linecap='round' stroke-linejoin='round')
        path(d='M18.835 24.973a8.4882 8.4882 0 00.2135-1.8599c-.0055-4.5427-3.5865-8.276-8.1251-8.4703l-.6692-.8738a.265.265 0 00-.3726-.049l-.2269.1735V8.1166a.2649.2649 0 00-.2656-.2656H1.2346a.2653.2653 0 00-.2662.2656v12.1641c0 .0958.0531.1755.1287.2223-.0315.083-.0251.1782.033.2542l1.0124 1.3219a8.488 8.488 0 00-.0703 1.034c.0052 4.2212 3.1116 7.7972 7.2905 8.3928' stroke-width='1.3229')
        path(d='M.935 10.5926a.3042.3042 0 01-.305-.3049V.935C.63.766.766.63.935.63h9.1168c.1689 0 .3048.136.3048.305v9.3527a.3042.3042 0 01-.3048.3049' stroke-width='1.2602')
        path(d='M7.5535 10.4846L4.4799 4.3374l1.8709.2673v1.2027' stroke-width='1.3229')
        g
          path(d='M58.2139 24.973a8.4882 8.4882 0 01-.2135-1.8599c.0055-4.5427 3.5865-8.276 8.1251-8.4703l.6692-.8738a.265.265 0 01.3726-.049l.2269.1735V8.1166a.2649.2649 0 01.2656-.2656h8.1545a.2653.2653 0 01.2662.2656v12.1641c0 .0958-.0532.1755-.1287.2223.0315.083.0251.1782-.033.2542l-1.0124 1.3219c.0445.343.068.6882.0703 1.034-.0052 4.2212-3.1116 7.7972-7.2905 8.3928' stroke-width='1.3229')
          path(d='M76.114 10.5926a.3042.3042 0 00.3048-.3049V.935A.3042.3042 0 0076.114.63h-9.1168a.3042.3042 0 00-.3049.305v9.3527c0 .169.136.3049.305.3049' stroke-width='1.2602')
          path(d='M69.4954 10.4846l3.0736-6.1472-1.8709.2673v1.2027' stroke-width='1.3229')
    g.hulk__arms.hulk__arms--smash-mode.hulk__body-part(stroke-width='1.3229' stroke-linecap='round')
      g.hulk__arm.hulk__arm--left
        path(d='M20.002 31.5689c.4458 1.054.6923 2.2129.6923 3.4293 0 4.8657-3.9444 8.81-8.8101 8.81s-8.8101-3.9443-8.8101-8.81 3.9444-8.8101 8.81-8.8101' stroke-linejoin='round')
        g.hulk__forearm.hulk__forearm--left
          path(d='M10.345 39.7024c-1.015 3.2399 1.6738 6.9664 6.0055 8.3231 2.2269.6949 4.5691.649 6.4428-.1263a2.5995 2.5995 0 002.4085 1.597l5.609-.0107c1.4432-.003 2.6033-1.167 2.6006-2.6104l-.01-5.3454c-.0028-1.4433-1.1672-2.6028-2.6105-2.6001l-5.609.0106a2.6124 2.6124 0 00-.7305.1063c-1.1234-1.235-2.681-2.204-4.426-2.7532-.4861-.1523-.9806-.2701-1.4772-.3524a10.4402 10.4402 0 00-1.4895-.1392h0' stroke-linejoin='round')
          path(d='M28.3394 42.0882h4.7625M28.604 45.5278h4.6302' fill='none')
      g.hulk__arm.hulk__arm--right
        path(d='M56.377 31.5689c-.4457 1.054-.6923 2.2129-.6923 3.4293 0 4.8657 3.9445 8.81 8.8101 8.81 4.8657 0 8.8102-3.9443 8.8102-8.81s-3.9445-8.8101-8.8102-8.8101' stroke-linejoin='round')
        g.hulk__forearm.hulk__forearm--right
          path(d='M66.034 39.7024c1.015 3.2399-1.6738 6.9664-6.0054 8.3231-2.227.6949-4.5692.649-6.4428-.1263a2.5995 2.5995 0 01-2.4086 1.597l-5.609-.0107c-1.4432-.003-2.6033-1.167-2.6005-2.6104l.01-5.3454c.0027-1.4433 1.1671-2.6028 2.6104-2.6001l5.609.0106c.2541.0004.4987.0386.7305.1063 1.1234-1.235 2.681-2.204 4.426-2.7532.4861-.1523.9806-.2701 1.4772-.3524.4966-.0822.9952-.129 1.4895-.1392h0' stroke-linejoin='round')
          path(d='M48.0397 42.0882h-4.7625M47.775 45.5278H43.145' fill='none')
    //- g
    //-   path(fill='#b3b3b3' stroke='#1a1a1a' stroke-width='.9089' stroke-linecap='round' stroke-linejoin='round' d='M7.1807 50.3077h62.5911v25.5495H7.1808z')
    //-   text(style='line-height:1.25' x='44.6502' y='254.0279' font-weight='400' font-size='10.5833' font-family='sans-serif' letter-spacing='0' word-spacing='0' stroke-width='.2646' transform='translate(-29.4514 -186.9999)')
    //-     tspan(x='44.6502' y='254.0279') Like
  button.like__button
    span.fragments
    svg.crack(viewBox='0 0 200 100')
      polyline(points="0,0 20,10 10,20 15,35" stroke-linecap="round")
      polyline(points="200,100 190,80 198,82 199,70" stroke-linecap="round")
      polyline(points="30,100 35,80 20,78 13,70" stroke-linecap="round")
      polyline(points="160,0 170,10 186,15 194,28" stroke-linecap="round")
    span.like-icon
      svg(viewBox="0 0 24 24")
        path(fill="currentColor" d="M23,10C23,8.89 22.1,8 21,8H14.68L15.64,3.43C15.66,3.33 15.67,3.22 15.67,3.11C15.67,2.7 15.5,2.32 15.23,2.05L14.17,1L7.59,7.58C7.22,7.95 7,8.45 7,9V19A2,2 0 0,0 9,21H18C18.83,21 19.54,20.5 19.84,19.78L22.86,12.73C22.95,12.5 23,12.26 23,12V10M1,21H5V9H1V21Z")
    span.like-label Like
    span.like-count 0
              
            
!

CSS

              
                *
  box-sizing border-box

:root
  --hulk-green hsl(120, 100%, 25%)
  --hulk-outline hsl(120, 100%, 10%)
  --hulk-stroke hsl(0, 0%, 10%)
  --hulk-shorts hsl(279, 78%, 21%)
  --hulk-shorts-outline hsl(279, 78%, 10%)

body
  display flex
  align-items center
  justify-content center
  min-height 100vh

button
  cursor pointer
  padding 0
  margin 0
  background hsl(0, 0%, 50%)
  color hsl(0, 0%, 100%)
  position absolute
  left 10%
  width 80%
  border 5px solid hsl(0, 0%, 25%)
  border-radius 5px
  bottom 0
  height 35%
  font-size 2rem
  font-weight bold
  font-family sans-serif
  color hsl(0, 0%, 15%)
  text-shadow 2px 2px hsl(0, 0%, 60%)
  display flex
  align-items center
  justify-content center
  grid-template-columns repeat(3, 1fr)
  outline transparent

  @media(min-width 768px) and (min-height 768px)
    font-size 3rem

  span
    display inline-block

.like-icon svg
  height 3rem
  width 3rem
  filter drop-shadow(2px 2px hsl(0, 0%, 60%))

  @media(min-width 768px) and (min-height 768px)
    height 4rem
    width 4rem

.crack
  overflow hidden
  filter drop-shadow(2px 2px hsl(0, 0%, 60%))
  -webkit-clip-path inset(0 0 0 0)
  clip-path inset(0 0 0 0)

.crack
  position absolute
  top -5px
  left -5px
  stroke hsl(0, 0%, 25%)
  height calc(10px + 100%)
  width calc(10px + 100%)
  fill none
  stroke-width 3
  display none

.fragments
  display block
  width 100%
  position absolute
  top 0
  left 0

.fragment
  height calc(var(--size, 10) * 0.15vmin)
  width calc(var(--size, 10) * 0.15vmin)
  position absolute
  display block
  top 0
  left calc(var(--x, 50) * 1%)
  background 'hsl(0, 0%, %s)' % calc(var(--lightness, 30) * 1%)
  border-radius calc(var(--radius, 50) * 1%)
  transform scale(0)

.like-label
  margin 0 1.5rem

.smash
  min-width 300px
  width 50vmin
  // background red
  position relative

.hulk
  &__body-part
    stroke var(--hulk-outline)
    fill var(--hulk-green)

  &__chin
    fill var(--hulk-outline)

  &__face
  &__back-head
    fill var(--hulk-green)

  &__eye
  &__hair
  &__mouth-open
    fill var(--hulk-stroke)

  &__eyebrow
    stroke var(--hulk-stroke)

  &__pupil
  &__mouth
  &__teeth
    fill white

  &__sweat
    fill hsla(190, 100%, 50%, 0.75)

  &__shorts
    fill var(--hulk-shorts)
    stroke var(--hulk-shorts-outline)

              
            
!

JS

              
                const {
  gsap,
  Physics2DPlugin,
  gsap: { to, set, timeline },
} = window

// Register the plugin
gsap.registerPlugin(Physics2DPlugin)

const randomInRange = (min, max) =>
  Math.floor(Math.random() * max - min + 1) + min

const HULK = document.querySelector('.hulk')
const HULK_BACK = document.querySelector('.hulk__back')
const HULK_HEAD = document.querySelector('.hulk__head')
const HULK_EYES = [
  document.querySelector('.hulk__eye--left'),
  document.querySelector('.hulk__eye--right'),
]
const CRACKS = document.querySelector('.crack')
const FRAGMENT_CONTAINER = document.querySelector('.fragments')
const HULK_OPEN_MOUTH = document.querySelector('.hulk__mouth-scream')
const HULK_SMASH_ARMS = document.querySelector('.hulk__arms--smash-mode')
const HULK_FLIGHT_ARMS = document.querySelector('.hulk__arms--flight-mode')
const HULK_ARM_LEFT = document.querySelector('.hulk__arm--left')
const HULK_TORSO = document.querySelector('.hulk__torso')
const HULK_FOREARM_LEFT = document.querySelector('.hulk__forearm--left')
const HULK_ARM_RIGHT = document.querySelector('.hulk__arm--right')
const HULK_FOREARM_RIGHT = document.querySelector('.hulk__forearm--right')
const HULK_MOUTH = document.querySelector('.hulk__mouth')
const HULK_SWEAT = document.querySelector('.hulk__sweat')
const LIKE_BUTTON = document.querySelector('button')
const CONTAINER = document.querySelector('.smash')
const LIKE_LABEL = document.querySelector('.like-count')

const SIDES = {
  LEFT: 'LEFT',
  RIGHT: 'RIGHT',
}
const SOUNDS = {
  GRUNT: new Audio(
    'https://s3-us-west-2.amazonaws.com/s.cdpn.io/605876/grunt.mp3'
  ),
  LAND: new Audio(
    'https://s3-us-west-2.amazonaws.com/s.cdpn.io/605876/crash.mp3'
  ),
  // Baby roar
  JUMP: new Audio(
    'https://s3-us-west-2.amazonaws.com/s.cdpn.io/605876/baby-roar.mp3'
  ),
  // Adult?
  // JUMP: new Audio('https://freesound.org/data/previews/340/340162_4869949-lq.mp3')
  SMASHES: [
    new Audio(
      'https://s3-us-west-2.amazonaws.com/s.cdpn.io/605876/SmashOneNew.mp3'
    ),
    new Audio(
      'https://s3-us-west-2.amazonaws.com/s.cdpn.io/605876/SmashTwoNew.mp3'
    ),
  ],
}
// Adjust Audio volume
SOUNDS.GRUNT.volume = SOUNDS.LAND.volume = SOUNDS.JUMP.volume = SOUNDS.SMASHES[0].volume = SOUNDS.SMASHES[1].volume = 0.5

const STATE = {
  READY: false,
  SMASHING: false,
  SIDE: SIDES.RIGHT,
  SMASHES: 0,
  LIKES: 0,
}

set(HULK, { transformOrigin: '50% 50%', scale: 0 })
set(HULK_SWEAT, { transformOrigin: '50% 0', scale: 0, opacity: 0, y: '-=5' })
set(HULK_EYES, { transformOrigin: '50% 50%' })
set(HULK_FOREARM_LEFT, { transformOrigin: '25% 25%' })
set(HULK_ARM_LEFT, { transformOrigin: '25% 25%' })
set([HULK_ARM_RIGHT, HULK_FOREARM_RIGHT], { transformOrigin: '75% 25%' })
set([HULK_BACK, HULK_MOUTH, HULK_SMASH_ARMS], { display: 'none' })

const JUMP_SPEED = 0.5
const LAND_LOOP_SPEED = 0.05
const WALK_OUT_TIME = 5
const WALK_OUT_SPEED = 3
const SMASH_SPEED = 0.05
const BLINK_SPEED = 0.05
const BREATHING_ROOM = 1
const CLOSE_EYES = 0.1

let walkOut
let breatheTimer

const RESET = () => {
  set([HULK_OPEN_MOUTH, HULK_HEAD, HULK_FLIGHT_ARMS], { display: 'block' })
  set([HULK_MOUTH], { display: 'none' })
}

const SIMMER_EYES = to(HULK_EYES, {
  duration: CLOSE_EYES,
  scaleY: 0.85,
  paused: true,
  onReverseComplete: () => set(HULK_EYES, { scaleY: 1 }),
})

const SWEAT_TL = new timeline({ paused: true, repeat: -1 })
  .to(HULK_SWEAT, { duration: 1, y: '+=10' }, 0)
  .to(HULK_SWEAT, { duration: 1, scale: 1 }, 0)
  .to(HULK_SWEAT, { duration: 0.5, opacity: 1 }, 0)
  .to(HULK_SWEAT, { duration: 0.5, opacity: 0 })

const HEAD_SHAKE_TL = new timeline({ paused: true, repeat: -1, yoyo: true }).to(
  HULK_HEAD,
  {
    y: '+=0.5',
    duration: 0.1,
  }
)
const BREATHE_TL = new timeline({ repeat: -1, yoyo: true }).to(HULK_TORSO, {
  duration: 1,
  y: '-=0.5',
})

const BUTTON_SMASH_TL = new timeline({ paused: true }).to(LIKE_BUTTON, {
  duration: SMASH_SPEED / 2,
  y: '+=10',
  repeat: 1,
  yoyo: true,
})

let BLINK_TL
let POUND_TL
const BLINK = () => {
  if (BLINK_TL) BLINK_TL.kill()
  set(HULK_EYES, { scaleY: 1 })
  BLINK_TL = new timeline({
    delay: randomInRange(1, 6),
    onComplete: () => BLINK(),
  }).to(HULK_EYES, {
    duration: BLINK_SPEED,
    scaleY: 0,
    repeat: 1,
    yoyo: true,
  })
}
BLINK()

const WALK_OUT = () => {
  return new timeline({
    onStart: () => {
      LIKE_BUTTON.setAttribute('disabled', true)
      SOUNDS.GRUNT.play()
    },
    onComplete: () => {
      STATE.READY = false
      LIKE_BUTTON.removeAttribute('disabled')
      RESET()
    },
  })
    .set(HULK_BACK, { display: 'block' })
    .set([HULK_HEAD, HULK_SMASH_ARMS], { display: 'none' })
    .set(HULK, { transformOrigin: '50% 100%' })
    .to(HULK, { scale: 0, duration: WALK_OUT_SPEED })
}

const startInactiveTimer = () => {
  if (walkOut) clearTimeout(walkOut)
  walkOut = setTimeout(WALK_OUT, WALK_OUT_TIME * 1000)
}

const JUMP = () => {
  // Set the state, disable the button
  LIKE_BUTTON.setAttribute('disabled', true)
  set(HULK_BACK, { display: 'none' })
  return new timeline({
    onStart: () => SOUNDS.JUMP.play(),
    onComplete: LAND,
  })
    .to(HULK, { scale: 1, duration: JUMP_SPEED }, 0)
    .to(
      HULK,
      { y: '-25vh', repeat: 1, yoyo: true, duration: JUMP_SPEED / 2 },
      0
    )
    .set(
      [HULK_FLIGHT_ARMS, HULK_OPEN_MOUTH],
      { display: 'none' },
      JUMP_SPEED * 0.85
    )
    .set([HULK_SMASH_ARMS, HULK_MOUTH], { display: 'block' }, JUMP_SPEED * 0.85)
}

const FRAGMENT_SPEED = 1
const FRAGMENT = () => {
  const NO_OF_FRAGMENTS = randomInRange(1, 5)
  for (let f = 0; f < NO_OF_FRAGMENTS; f++) {
    const FRAGMENT = document.createElement('span')
    FRAGMENT.className = 'fragment'
    FRAGMENT.style.setProperty('--x', randomInRange(10, 90))
    FRAGMENT.style.setProperty('--radius', randomInRange(0, 50))
    FRAGMENT.style.setProperty('--lightness', randomInRange(15, 60))
    FRAGMENT.style.setProperty('--size', randomInRange(5, 15))
    FRAGMENT_CONTAINER.appendChild(FRAGMENT)

    new timeline({
      onComplete: () => FRAGMENT.remove(),
    })
      .to(FRAGMENT, {
        duration: FRAGMENT_SPEED,
        scale: 1,
        physics2D: {
          velocity: window.innerHeight * 0.25,
          angle: 'random(-180, 0)',
          gravity: `random(${window.innerHeight * 0.25}, ${window.innerHeight *
            0.5})`,
        },
      })
      .to(
        FRAGMENT,
        {
          opacity: 0,
          duration: 0.25,
        },
        FRAGMENT_SPEED - 0.25
      )
  }
}

const CANCEL_ACTION = () => {
  STATE.SMASHING = false
  // Set walk away
  startInactiveTimer()
  // Kill sweating timeline
  SWEAT_TL.pause()
  SWEAT_TL.time(0)
  // Reset headshake
  HEAD_SHAKE_TL.pause()
  HEAD_SHAKE_TL.time(0)
  STATE.SWEATING = false
  // Kill smash counter?
  STATE.SMASHES = 0
  // Reset blinking
  BLINK()
  // Reset arms
  set([HULK_ARM_LEFT, HULK_ARM_RIGHT, HULK_FOREARM_LEFT, HULK_FOREARM_RIGHT], {
    rotate: 0,
  })
  if (breatheTimer) clearTimeout(breatheTimer)
  breatheTimer = setTimeout(
    () => BREATHE_TL.timeScale(1),
    BREATHING_ROOM * 1000
  )
  // Open eyes back up
  SIMMER_EYES.reverse()
}

const POUND = () => {
  const ACTIVE_SIDE = STATE.SIDE
  const FOREARM =
    ACTIVE_SIDE === SIDES.LEFT ? HULK_FOREARM_LEFT : HULK_FOREARM_RIGHT
  const ARM = ACTIVE_SIDE === SIDES.LEFT ? HULK_ARM_LEFT : HULK_ARM_RIGHT
  const SMASH_SOUND =
    ACTIVE_SIDE === SIDES.LEFT ? SOUNDS.SMASHES[0] : SOUNDS.SMASHES[1]
  const COEFFICIENT = ACTIVE_SIDE === SIDES.LEFT ? -1 : 1
  set([HULK_ARM_LEFT, HULK_ARM_RIGHT, HULK_FOREARM_LEFT, HULK_FOREARM_RIGHT], {
    rotate: 0,
  })
  POUND_TL = new timeline({
    onStart: () => {
      STATE.SIDE = ACTIVE_SIDE === SIDES.LEFT ? SIDES.RIGHT : SIDES.LEFT
      STATE.SMASHES += 1
      if (STATE.SMASHES > 10 && !STATE.SWEATING) {
        STATE.SWEATING = true
        BREATHE_TL.timeScale(10)
        SWEAT_TL.play()
      }
    },
    onComplete: () => {
      SMASH_SOUND.play()
      set(
        [HULK_ARM_LEFT, HULK_ARM_RIGHT, HULK_FOREARM_LEFT, HULK_FOREARM_RIGHT],
        { rotate: 0 }
      )
      LIKE_LABEL.innerHTML = parseInt(LIKE_LABEL.innerHTML, 10) + 1
      BUTTON_SMASH_TL.restart()
      FRAGMENT()
      if (STATE.SMASHING) {
        POUND()
      }
    },
  })
    .to(
      ARM,
      {
        repeat: 1,
        yoyo: true,
        duration: SMASH_SPEED,
        rotate: 15 * COEFFICIENT,
      },
      0
    )
    .to(
      FOREARM,
      {
        repeat: 1,
        yoyo: true,
        duration: SMASH_SPEED,
        rotate: 25 * COEFFICIENT,
      },
      0
    )
  return POUND_TL
}

const ACTION = () => {
  if (!STATE.READY) {
    JUMP()
  }
  if (
    STATE.READY &&
    !STATE.SMASHING &&
    ((POUND_TL && POUND_TL.progress() === 1) || !POUND_TL)
  ) {
    STATE.SMASHING = true
    if (walkOut) clearTimeout(walkOut)
    if (BLINK_TL) {
      BLINK_TL.kill()
    }
    HEAD_SHAKE_TL.play()
    SIMMER_EYES.play()
    if (breatheTimer) clearTimeout(breatheTimer)
    BREATHE_TL.timeScale(6)
    LIKE_BUTTON.addEventListener('mouseup', CANCEL_ACTION)
    POUND()
  }
}

const LAND = () => {
  new timeline({
    repeat: 9,
    yoyo: true,
    onStart: () => {
      SOUNDS.LAND.play()
      set(CRACKS, { display: 'block' })
    },
    onComplete: () => {
      LIKE_BUTTON.removeAttribute('disabled')
      STATE.READY = true
      // Remove click and add mousedown listener
      LIKE_BUTTON.removeEventListener('click', ACTION)
      LIKE_BUTTON.addEventListener('mousedown', ACTION)
      // On land, start the inactivity timer in case we don't smash
      startInactiveTimer()
    },
  })
    .to(CONTAINER, {
      duration: LAND_LOOP_SPEED,
      y: '+=4',
      x: '-=2',
    })
    .to(CONTAINER, {
      duration: LAND_LOOP_SPEED,
      y: '-=2',
      x: '+=4',
    })
    .to(CONTAINER, {
      duration: LAND_LOOP_SPEED,
      y: '+=3',
      x: '-=1',
    })
    .to(CONTAINER, {
      duration: LAND_LOOP_SPEED,
      y: 0,
      x: 0,
    })
}

LIKE_BUTTON.addEventListener('click', ACTION)

              
            
!
999px

Console