<div class="text-container">
  <h1 class="revealing-text">
    <span>All of our materials are hand selected for the softest, smoothest fit possible. We strive to craft a product that will last to stand time. Everything is 100% made in the USA.</span>
    <span><span>All of our materials are hand selected for the softest, smoothest fit possible. We strive to craft a product that will last to stand time. Everything is 100% made in the USA.</span></span>
  </h1>
  <div class="button-container">
    <a class="trigger waves-effect"><span><span class="revealing-text"><span>TRIGGER!</span><span><span>TRIGGER!</span></span></span></a></span></div>
  </div>

// Unnecessary Styles
//////////////////////////////////////

$blue: #35D3D5;
$purple: #9259f8;
$cubic: cubic-bezier(0.19, 1, 0.22, 1);
$border-width: 2px;
$shadow-one: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
$shadow-one-hover:  0 10px 12px 0 rgba(0, 0, 0, 0.2);
html,
body {
  width: 100%;
  height: 100%;
}
html {
  display: table;
  font-size: 16px;
  font-family: "Playfair Display";
}
body {
  display: table-cell;
  vertical-align: middle;
}
h1 {
  font-size: 3rem;
  line-height: 4rem;
  font-weight: 700;
}
.text-container {
  max-width: 1100px;
  padding: 0 40px;
  margin: 0 auto;
}
.button-container {
  margin-top: 40px;
}


// Trigger Button
//////////////////////////////////////

// trigger button animation
.trigger {
  font-family: "Inconsolata";
  overflow: hidden;
  cursor: pointer;
  position: relative;
  display: inline-block;
  padding: 12px 24px;
  font-size: 2rem;
  font-weight: 100;
  background: #f8f8f8;
  // box-shadow: $shadow-one;
  /* text animation - on hover, trigger the effect for the button */
  &:hover {
    box-shadow: $shadow-one;
    transform: translateY(-2px);
    .revealing-text {
      span {
        &:nth-child(2) {
          transform: translateX(0);
          > span {
            transform: translateX(0);
          }
        }
      }
    }
  }
  /* change color of text for this button to gradient mask */
  .revealing-text > span:nth-child(1) {
    // color: transparent;
  }
  /* materialize waves effect modification */
  .waves-ripple {
    background: #f0f0f0;
  }
  .revealing-text > span:nth-child(2) > span {
    color: transparent;
    background: linear-gradient(to right, $purple, $blue);
    -webkit-background-clip: text;
  }
  /* line animations apply to immediate first span */
  &:before, &:after,
  > span:before, > span:after {
    content: "";
    position: absolute;
    display: block;
  }
  /* left and right lines */
  &:before, > span:before {
    width: $border-width;
    height: 0;
  }
  /* left line */
  &:before {
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, $purple 0%, $blue 100%);
  }
  /* right line */
  > span:before {
    bottom: 0;
    right: 0;
    background: linear-gradient(to top, $purple 0%, $blue 100%);
  }
  /* top and bottom lines */
  &:after, > span:after {
    height: $border-width;
    width: 0;
  }
  /* top line */
  &:after {
    top: 0;
    left: 0;
    background: linear-gradient(to right, $purple 0%, $blue 100%);
  }
  /* bottom line */
  > span:after {
    bottom: 0;
    right: 0;
    background: linear-gradient(to left, $purple 0%, $blue 100%);
  }
  /* animate lines on hover */
  &:hover {
    &:before,
    > span:before,
    &:after,
    > span:after {
      transition: $cubic 1s;
    }
    /* left line */
    &:before {
      animation: to-bottom $cubic 1s .05s forwards;
    }
    /* right line */
    > span:before {
      animation: to-top $cubic 1s .1s forwards;
    }
    /* top line */
    &:after {
      animation: to-right $cubic 1s .15s forwards;
    }
    /* bottom line */
    > span:after {
      animation: to-left $cubic 1s .2s forwards;
    }
  }
  &:hover:before,
  &:hover > span:before {
    height: 100%;
  }
  &:hover:after,
  &:hover > span:after {
    width: 100%;
  }
}
@keyframes to-bottom {
  to {
    transform: translateY(100%);
  }
}
@keyframes to-top {
  to {
    transform: translateY(-100%);
  }
}
@keyframes to-left {
  to {
    transform: translateX(-100%);
  }
}
@keyframes to-right {
  to {
    transform: translateX(100%);
  }
}


// Styling
//////////////////////////////////////

.revealing-text {
  position: relative;
  display: inline-block;
  > span {
    &:nth-child(1) {
      color: #ccc;
    }
    &:nth-child(2) {
      position: absolute;
      top: 0;
      left: 0;
      color: #535353;
      transition: .6s;
      width: 100%;
      transform: translatex(-100%);
      overflow: hidden;
      > span {
        transform: translatex(100%);
        display: inline-block;
        transition: inherit
      }
    }
  }
  &.revealed {
    span {
      &:nth-child(2) {
        transform: translateX(0);
        > span {
          transform: translateX(0);
        }
      }
    }
    }
}

// to do: rewrite using data-text attribute instead of repeating text twice

$(".trigger").on("click", function() {
  $(this).parents(".button-container").siblings("h1").toggleClass("revealed");
});
$(document).ready(function() {
  setTimeout(function() {
    $("h1").addClass("revealed");
  }, 400);
});