CSS Animation: Sugar, Butter, Flour (Waitress Musical)

css-animation-sugar-butter-flour-waitress-musical.markdown

CSS Animation: Sugar, Butter, Flour (Waitress Musical)

Listened to the entire Waitress musical soundtrack for like the 50th time and the fangirl in me decided to finally do something. If you haven't figured it out, I'm a huge Sara Bareilles fan T__T

A Pen by Olivia on CodePen.

License.

index.html

<section class="main-content">
  <div class="sugar-wrapper">
    <div class="sugar-box">
      <div class="box">
        <div class="label"></div>
        <div class="spoon"></div>
        <div class="sugar"></div>
      </div>
      <div class="in-the-box"></div>
      <div class="box-flap front"></div>
      <div class="box-flap back"></div>
      <div class="box-flap right"></div>
      <div class="box-flap left"></div>

    </div>
    <div class='sugar-pour'></div>
  </div>
  <div class="flour-wrapper">
    <div class="bag">
      <div class="flour">
      </div>
      <div class="wheat">
        <div class="stem"></div>
        <ul class="kernel">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
    <div class="flour-pour"></div>
  </div>
  <div class="butter-wrapper">
    <div class="butter">
      <div class="front"></div>
      <div class="top"></div>
      <div class="side"></div>
    </div>
  </div>
  <div class="bowl">
    <span class="text text-sugar">Sugar</span>
    <span class="text text-butter">Butter</span>
    <span class="text text-flour">Flour</span>
  </div>
</section>
<section class="explanation">
  Inspired by the Waitress musical, <br>written by the kickass <a href="https://youtu.be/PSPm5wu9FlE" target="_blank">Sara Bareilles</a>.
</section>
<footer>
  <a href="https://www.linkedin.com/in/oliviale/" target="_blank"><i class="icon-social-linkedin icons"></i></a>
  <a href="https://twitter.com/meowlivia_" target="_blank"><i class="icon-social-twitter icons"></i></a>
  <a href="https://github.com/oliviale" target="_blank"><i class="icon-social-github icons"></i></a>
  <a href="https://dribbble.com/oliviale" target="_blank"><i class="icon-social-dribbble icons"></i></a>
</footer>

script.js

//no js
//i should really clean up the messy code though fml

style.scss

body {
  background: #323b45;
  font-family: 'Passion One', sans-serif;
  text-align: center;
}
.main-content {
  text-align: center;
  padding-top: 150px;
  position: relative;
  margin: 4em auto 1em;
}
.bag {
  background: #ffd572;
  width: 80px;
  height: 70px;
  position: relative;
  display: inline-block;
  border-radius: 50px 50px 150% 150%/100px;
  &:before {
    position: absolute;
    content: '';
    background: #f0bd44;
    width: 80px;
    height: 10px;
    top: 0px;
    left: 0px;
    border-radius: 100px;
    z-index: 1;
  }
  &:after {
    position: absolute;
    content: '';
    background: #ffd572;
    width: 80px;
    height: 25px;
    bottom: 0px;
    left: 0px;
    border-radius: 50% 50%;
    z-index: 1;
  }
}

.flour {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: #e8e8e8;
  top: -8px;
  left: 10px;
  position: relative;
  transform: rotate(45deg);
  z-index: -1;
  &:after {
    content: '';
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: #e8e8e8;
    top: -19px;
    left: 10px;
    position: absolute;
    z-index: -1;
  }
}

.wheat {
  position: relative;
  z-index: 2;
  margin-left: 1px;
  .stem {
    position: absolute;
    left: 50%;
    width: 4px;
    margin: 0 0 0 -2px;
    border-radius: 40px;
    height: 30px;
    background: #dc7e26;
  }
  .kernel {
    position: absolute;
    left: 50%;
    li {
      position: absolute;
      border-radius: 0 15px 5px;
      background: #dc7e26;
      width: 12px;
      height: 12px;
      top: 1px;
      &:nth-child(1) {
        top: -8px;
        left: -6px;
        transform: rotate(48deg);
      }
      &:nth-child(n + 2) {
        left: -13px;
      }
      &:nth-child(2n + 3) {
        left: 1px;
        transform: rotate(90deg);
      }
      &:nth-child(n + 4) {
        top: 12px;
      }
    }
  }
}

.butter {
  display: inline-block;
  position: relative;
  .front {
    width: 60px;
    height: 40px;
    background: #fce68c;
    border-radius: 8px;
    position: relative;
    z-index: 2;
  }
  .top {
    height: 88px;
    width: 300px;
    background-color: #ffcd54;
    position: absolute;
    left: -78px;
    margin-left: -8px;
    top: -52px;
    transform: skew(-78deg) scale(.2);
    z-index: 1;
    border-radius: 0 50% 40px 25%;
    border-left: 5px solid #ffcd54;
  }
  .side {
    height: 39px;
    width: 68px;
    background-color: #fcda5d;
    position: absolute;
    left: 100%;
    margin-left: -8px;
    top: -8px;
    transform: skew(0, 165deg);
    z-index: 1;
    border-radius: 6px 6px 6px 4px;
  }
}

.plate {
  background: #aed3ee;
  width: 65px;
  height: 8px;
  position: absolute;
  border-radius: 6px 2px 2px 6px;
  z-index: 3;
  margin: -4px 0 0 -5px;
  &:before {
    content: '';
    height: 8px;
    width: 68px;
    background-color: #aed3ee;
    position: absolute;
    left: 100%;
    margin-left: -1px;
    top: -9px;
    transform: skew(0, 165deg);
    z-index: 3;
    border-radius: 6px 6px 6px 4px;
  }
}

.sugar-box {
  display: inline-block;
  position: relative;
  .box {
    background: #f0f0f0;
    width: 70px;
    height: 85px;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    .label {
      position: absolute;
      background: #ffd3d5;
      width: 140%;
      height: 70%;
      top: 35px;
      left: -30%;
      border: 4px solid #d85c81;
      transform: rotate(-10deg);
      &:before {
        content: '';
        background: #d85c81;
        width: 60px;
        height: 13px;
        position: absolute;
        top: -20px;
      }
    }
    .spoon {
      background: #999;
      width: 40px;
      right: -2px;
      height: 6px;
      bottom: 15px;
      position: absolute;
      &:before {
        width: 25px;
        height: 10px;
        background: #777;
        content: '';
        position: absolute;
        left: -10px;
        top: -1px;
        border-radius: 4px 4px 50% 50%;
        z-index: 1;
      }
      &:after {
        width: 24px;
        height: 10px;
        background: #999;
        content: '';
        position: absolute;
        left: -10px;
        top: 2px;
        border-radius: 50% 50% 40px 40px;
        z-index: 3;
      }
    }
    .sugar {
      width: 18px;
      height: 18px;
      border-radius: 6px 6px 50%;
      background: #e9e9e9;
      bottom: 10px;
      right: 26px;
      position: absolute;
      transform: rotate(45deg);
      z-index: 1;
    }
  }
  .box-flap.front {
    position: absolute;
    top: 0;
    left: -21px;

    border-bottom: 8px solid #ccc;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    height: 0;
    width: 80px;
    z-index: 2;
  }
  .box-flap.back {
    position: absolute;
    top: -22px;
    left: 1px;

    border-top: 15px solid #ccc;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    height: 0;
    width: 55px;
  }
  .in-the-box {
    position: absolute;
    top: -7px;
    left: -5px;

    border-bottom: 8px solid #777;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    height: 0;
    width: 54px;
  }
  .box-flap.right {
    background: #aaa;
    width: 12px;
    height: 19px;
    position: absolute;
    right: -8px;
    top: -19px;
    transform: skew(-20deg, -20deg) rotate(-50deg);
  }
  .box-flap.left {
    background: #aaa;
    width: 10px;
    height: 19px;
    position: absolute;
    left: -6px;
    top: -19px;
    transform: skew(-20deg, -20deg) rotate(150deg);
  }
}

.bowl {
  width: 170px;
  height: 80px;
  margin: 20px;
  display: inline-block;
  background: lightblue;
  position: relative;
  border-radius: 4px 4px 150px 150px;
  &:after {
    content: '';
    position: absolute;
    width: 190px;
    height: 10px;
    border-radius: 6px;
    left: -10px;
    background: #00a5df;
    top: 0;
  }
}

.sugar-wrapper {
  position: absolute;
  right: 53%;
  top: 30px;
  animation: sugarEffect 7s infinite;
}

@keyframes sugarEffect {
  0% {
    transform: rotate(75deg);
    opacity: 0;
  }
  25% {
    transform: rotate(88deg);
    opacity: 1;
  }
  50% {
    transform: rotate(75deg);
    opacity: 0;
  }
  100% {
    transform: rotate(75deg);
    opacity: 0;
  }
}

.flour-wrapper {
  position: absolute;
  left: 54%;
  top: 94px;
  transform: rotate(-75deg);
  animation: flourEffect 7s infinite 4.5s;
  opacity: 0;
}

@keyframes flourEffect {
  0% {
    opacity: 0;
    transform: rotate(-75deg);
  }
  25% {
    transform: rotate(-85deg);
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: rotate(-75deg);
  }
  100% {
    opacity: 0;
    transform: rotate(-75deg);
  }
}

.butter-wrapper {
  position: absolute;
  left: 46%;
  top: 40px;
  transform: scale(0.7) rotate(40deg);
  animation: butterEffect 7s infinite 2s;
  opacity: 0;
}

@keyframes butterEffect {
  0% {
    top: 40px;
    opacity: 0;
  }
  25% {
    top: 80px;
    opacity: 1;
  }
  50% {
    top: 80px;
    opacity: 0;
  }
  100% {
    top: 40px;
    opacity: 0;
  }
}

.sugar-pour {
  position: absolute;
  width: 110px;
  height: 25px;
  background: #eee;
  border-radius: 100% 10% 10% 20%;
  right: -88px;
  top: -24px;
  z-index: 1;
  transform: rotate(-2deg);
  animation: sugarWidthChange 4s infinite;
}

.flour-pour {
  position: absolute;
  width: 40px;
  height: 25px;
  background: #e9e9e9;
  border-radius: 100% 10% 10% 20%;
  right: 100%;
  top: -24px;
  z-index: 0;
  transform: rotate(-2deg);
  animation: sugarWidthChange 2s infinite;
  &:after {
    content: '';
    position: absolute;
    width: 60px;
    height: 28px;
    background: #e9e9e9;
    top: 0px;
    right: -45px;
    border-radius: 40% 50% 10% 50%;
  }
}

@keyframes sugarWidthChange {
  0%, 100% {
    height: 25px;
  }
  25% {
    height: 30px;
  }
}

.bowl .text {
  text-transform: uppercase;
  display: inline-block;
  font-size: 25px;
  letter-spacing: 1px;
  color: #00a5df;
  opacity: 0;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 28px;
}
.bowl .text-sugar {
  animation: textChange 7s infinite;
}
.bowl .text-butter {
  animation: textChange 7s infinite 2.5s;
}
.bowl .text-flour {
  animation: textChange 7s infinite 4.6s;
}

@keyframes textChange {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  40% {
    opacity: 0;
    transform: scale(1.3);
  }
  100% {
    opacity: 0;
  }
}

.explanation {
  color: #f8f8f8;
  font: 300 16px Comfortaa;
  margin-top: 3em;
  padding: 20px;
  line-height: 1.4;
  a {
    color: #f8f8f8;
    text-decoration: none;
    position: relative;
    &:after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      height: 1px;
      background: transparent;
      border-bottom: 1px dashed #f8f8f8;
    }
    &:hover:after {
      border-bottom: 1px solid #f8f8f8;
    }
  }
}

footer {
  margin: 3em auto;
  a {
    text-decoration: none;
    display: inline-block;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #111;
    color: #f8f8f8;
    margin: 5px;
    &:hover {
      background: #222;
    }
    .icons {
      margin-top: 12px;
      display: inline-block;
      font-size: 20px;
    }
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css" rel="stylesheet" />