Squash & Stretch

index.html

<h1>The 12 Basic Principles of Animation</h1>
<h2>1. Squash & Stretch</h2>
<div id="stage">
  
  <div id="splashes">
    <div id="topS">
      <div></div>
      <div></div>
      <div></div>
    </div>
    
  </div>
  
  
  <div id="cube">
    
    <div id="bottomS">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    
    
    <div id="front"></div>
    <div id="back"></div>
    <div id="left"></div>
    <div id="right"></div>
    <div id="top"></div>
    <div id="bottom"></div>
    
    
  </div>
  
  

</div>

<div id="ref">
  <a target="_blank"  href="http://the12principles.tumblr.com/post/84179300674/squash-stretch">Reference Art by Vincenzo Lodigiani</a>
</div>

<div id="footer">
  <h3>See More Principles</h3>
  <ol>
    <li><a target="_blank" class="current"  href="http://codepen.io/patrickhill/pen/ogWQGx">Squash & Stretch</a></li>
    <li><a target="_blank" href="http://codepen.io/patrickhill/pen/jEwaba/">Staging</a></li>
    <li>More Coming Soon
  </ul>
</div>

Squash-&-Stretch.markdown

Squash & Stretch

I created one of the 12 Principles of animation with pure CSS.

A Pen by Patrick Hill on CodePen.

License.

style.scss

@import "bourbon";
$stageWidth: 600px;
body {
  background-color: #2E2E2E;
  font-family:"futura-pt", futura, sans-serif;
  color: #686868; 
  padding: 10px 40px;
}
h1, h2, h3, h4 {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .1em;
}
h1,h3 {
  font-size:14px;
  border-bottom: 1px solid;
  padding: 10px 0;
  margin-bottom: 10px;
}
h2 { margin-top: 0; }
a {color: #e17e66; text-decoration:none;}
a.current{color:desaturate( darken(#e17e66, 25%), 40% );}
a:hover {
  color: complement(#e17e66);
}

#ref {
  width: $stageWidth;
  margin: 30px auto;
  text-align:right;
}
#stage {
  background-color: #333333;
  width: $stageWidth;
  height: 278px;
  margin: auto;
  position: relative;
  @include perspective(400px);
  overflow: hidden;
  
  &:after {
    content:"";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/42053/noise.gif) center center no-repeat;
    @include transform(translateZ(0));
  }
}
$boxSize: 20px;

#cube {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: $boxSize;
  height: $boxSize;
  @include transform-origin(center bottom);
  @include transform( rotateY(30deg) translate3d(0, 60px, 0) scaleY(1)  scaleX(4) scaleZ(4)  );
  @include transform-style(preserve-3d);
  @include animation(ss 1s linear infinite alternate);
}
$cubeColor: #cccccc;
#cube div {
  width: $boxSize;
  height: $boxSize;
  position: absolute;
  background-color: $cubeColor;
}
#front {
  @include transform( translate3d(0,0,$boxSize/2) );
  //background-color: red !important;
  //opacity: .2;
}
#back {
  @include transform( translate3d(0,0,-$boxSize/2) );
  //background-color: darkred !important;
  //opacity: .2;
}
#top {
  @include transform(rotateX(-90deg) translate3d(0,-$boxSize/2,0));
  @include transform-origin(center top);
  background-color: lighten($cubeColor, 20%) !important;
  //opacity: .2;
}
#bottom {
  @include transform(rotateX(90deg) translate3d(0,$boxSize/2,0));
  @include transform-origin(center bottom);
  background-color: black !important;
  //opacity: .2;
}
#left {
  @include transform(rotateY(90deg) translate3d(-$boxSize/2,0,0));
  @include transform-origin(left center);
  background-color: darken($cubeColor, 40%) !important;
  //opacity: .2;
}
#right {
  @include transform(rotateY(-90deg) translate3d($boxSize/2,0,0));
  @include transform-origin(right center);
  //opacity: .2;
}


#topS div, #bottomS div {
  width: 2px;
  height: 20px;
  background-color: $cubeColor;
  position: absolute;
}
#topS {
  width: 20px;
  left: 0;
  right: 0;
  top: 40px;
  margin: auto;
  //background-color: red;
  position: relative;
  //opacity: .5;
  @include transform-origin(center top);
  @include animation(topSplash 2s linear infinite);
  div:first-child {
    left: 0;
  }
  div:nth-child(1) {
    left: 50%;
    //margin-left: -1px;
    @include transform(scaleY(1.1));
  }
  div:last-child {
    right: 0;
    left: auto;
  }
}

$splashW: 2px;
$spalshH: 5px;
#bottomS {
  @include transform-style(preserve-3d);
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: transparent !important;
  @include transform(translateY(18px));
  //opacity: 0;
  @include animation(fadeIn 2s linear infinite);
  div {
    @include transform-origin(center center);
    background-color: white;
  }
  
  div:nth-child(1) {
    width: 2px;
    height: 5px;
    @include transform( rotateX(90deg) translate3d(5px,25px,0px) );
    @include transform-origin(center bottom);
  }
  div:nth-child(2) {
    width: 2px;
    height: 5px;
    @include transform( rotateX(90deg) translate3d(5px,-15px,0px) );
    @include transform-origin(center bottom);
  }
  div:nth-child(3) {
    width: 5px;
    height: 2px;
    @include transform( rotateX(90deg) translate3d(30px,5px,0px) );
    @include transform-origin(center bottom);
  }
  div:nth-child(4) {
    width: 5px;
    height: 2px;
    @include transform( rotateX(90deg) translate3d(-10px,0px,0px) );
    @include transform-origin(center bottom);
  }
}


@include keyframes(topSplash) {
  0%,30% {
    @include transform(scaleY(0));
    //@include animation-timing-function( cubic-bezier(0.895, 0.03, 0.685, 0.22) );
  }
  40% {
    @include transform(scaleY(4));
  }
  41%, 100% {
    @include transform(scaleY(0));
  }
}

@include keyframes(fadeIn) {
  0%,30% { opacity: 0; }
  38% { opacity: 0; }
  43% { opacity: 1; }
  49% { opacity: 0; }
  100% { opacity: 0; }
}


@include keyframes(ss) {
  0% {
    @include transform( rotateY(180deg) translate3d(0, -100px, 0) scaleY(1)  );
    @include animation-timing-function( cubic-bezier(0.895, 0.03, 0.685, 0.22) );
    //@include transform-origin(center top);
  }
  73% {
    @include transform( rotateY(55deg) translate3d(0, 100px, 0) scaleY(8)  );
    //@include transform-origin(center bottom);
  }
  80% {
    @include transform( rotateY(55deg) translate3d(0, 100px, 0) scaleY(1)  scaleX(1) scaleZ(1) );
    //@include transform-origin(center bottom);
  } 
  100% {
    @include transform( rotateY(55deg) translate3d(0, 100px, 0) scaleY(.25)  scaleX(3) scaleZ(3) );
    //@include animation-timing-function(ease-out);
    //@include transform-origin(center bottom);
  }
}