<section class="container">
  <h1 class="title">This is a very very long whip</h1>
  <div class="button">click here to spank me</div>
</section>

@import url(https://fonts.googleapis.com/css?family=PT+Sans);

$border-color: #533d4a;
$background-color: #7DC8CD;
$text-color: #F7EFDA;
$black: #000;

html{
  &:before, &:after{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 25%;
    background: $black;
    z-index: -1;
  }
  &:before{
    opacity: 0.2;
    bottom: 25%;
  }
  &:after{
    opacity: 0.25;
    bottom: 0;
  }
}

body{
  font-family: 'PT Sans', sans-serif;
  background: $background-color;
  overflow: hidden;
  
  &:before, &:after{
    content: "";
    display: block;
    position: absolute;
    height: 25%;
    width: 100%;
    left: 0;
    background: $black;
    z-index: -1;
  }
  &:before{
    opacity: 0.1;
    top: 0;
  }
  &:after{
    opacity: 0.15;
    top: 25%;
  }
}
.container{
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  display: block;
  position: absolute;
}
.button{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  float: left;
  margin-top: 80px;
  cursor: pointer;
  font-size: 14px;
}
h1, .button{
  color: $text-color;
  text-transform: uppercase;
  transform-origin: left bottom;
  text-shadow: -1px 0 $border-color, 0 1px $border-color, 1px 0 $border-color, 0 -1px $border-color, -2px 0 $border-color, 0 2px $border-color, 2px 0 $border-color, 0 -2px $border-color, -3px 0 $border-color;
}
h1{
  span{
    display: block;
    float: left;
    padding: 0 3px;
    transform-origin: left top;
    transform:rotate(-40deg) translateY(-20px);
    
//     &.word7{
//       transform:rotate(-40deg) translateY(-40px);
//     }
    
//     &.word8{
//       transform:rotate(-40deg) translateY(-70px);
//     }
  }
}

$(document).ready(function() {
  $(".title").lettering('words');
});

$(document).ready(function() {
  animation();
}, 1000);

$('.button').click(function() {
  animation();
});

function animation() {
    var words = new TimelineMax();
  words.staggerFromTo(".title span", 0.5,
    {ease: Back.easeOut.config(3.4), rotation: "-40deg", y:-20, x:0},
    {ease: Back.easeOut.config(3.4), rotation: "0deg", y:0, x:0}, 0.05);

    var title = new TimelineMax();
  title.fromTo(".title", 0.6, 
    {ease: Back.easeOut.config(3.4), rotation: "40deg", y: 50, opacity: 0},
    {ease: Back.easeOut.config(3.4), rotation: "0deg", y: 0, opacity: 1});
}