<section id="mast" class="mast animate">
   <header class="mast__header">
     <span class="mast__icon">🌴</span>
     <h1 class="mast__title js-letters text-animate">What's Golden?</h1>
     <p class="mast__text js-letters">We'll take it back to the days of yes yallin'
  </header>
</section>

<button class="btn"><i class="ion-refresh"></i>

// fonts
$font-header: Shrikhand,georgia;
$font-paragraph : "Fredoka One",arial;
// colors

$color-alpha : #fe6513;
$color-beta : #facdcc;

// easings
$ease-cb: cubic-bezier(.4,0,.2,1);
$ease-cb-2: cubic-bezier(.19,1,.22,1);
$ease-cb-3: cubic-bezier(.77,0,.175,1);
$ease-cb-4: cubic-bezier(.19,0.9,.9,1);
// padding
$pad: 3em;

// mqs
$mq-med: 54em;
$mq-large: 65em;
$mq-xlarge: 91em;


//----------------------------------------------
//  nth-ani-delay()
//  Mixin that loops through a parent's specified number 
//  of child elements, applying animation-delays to create 
//  a staggered effect.
//
//  @param: $delay_items: [7] - number of nth-of-type items to create
//  @param: $delay_time:[1.5s] - transition-dealy value
//----------------------------------------------
@mixin nth-ani-delay($num_items: 7, $delay_time: 0.2s){
  @for $i from 1 through $num_items {
    &:nth-child(#{$i}) {   
      animation-delay: $delay_time * $i; 
    }
  }
}

//-------------------------------
//  Body, prevent scrolling
//-------------------------------
body{
  height: 100%;
  overflow-y:hidden;
}

//------------------------------------
//  Button trigger
//-------------------------------------
button {
  position: fixed;
  bottom: 1em;
  right: 1em;
  display: block;
  height: 4rem;
  width: 4rem;
  line-height: 4rem;
  color: $color-beta;
  background: $color-alpha;
  outline: 0;
  border: 0;
  border-radius: 100%;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
  transition: background 0.3s $ease-cb;

  i {
    position: relative;
    top: -1px;
    right: -2px;
    display: block;
    font-size: 2rem;
    transition: color 0.4s $ease-cb;
  }
  &:hover {
    cursor: pointer;
    background: darken($color-alpha, 04);
    transition:  background 0.4s $ease-cb;
    
    i {
      color: #fff;
      transition: color 0.4s $ease-cb;
    }
  }
  &:active{
    background: darken($color-alpha, 3);
    box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.2);
    transition: background 0.1s $ease-cb;
    i{
      transform: rotate(360deg);
      transition: transform 0.5s $ease-cb;
    }
  }
}

//-------------------------------
//  Mast
//-------------------------------
.mast{
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align:center;
  color: $color-alpha;
  background-color:$color-beta;
  
  &__header{
    padding: 1em;
  }
  
  &__title{
    margin: 0.15em auto;
    padding: 0 1em;
    font-family:$font-header;
    font-size: calc(100% + 3.85vw);
    color: $color-alpha;
    text-shadow: 1px 1px 0px rgba(#fff, 0.5);
  }
  
  &__text{
    font-size: 1em;
    font-family: $font-paragraph;
    text-shadow: 1px 1px 0px rgba(#fff, 0.4);
    @media (min-width: $mq-med){
      font-size: calc(100% + 0.5vw);
    }
  }
  
  &__icon{
    display: block;
    font-size: 2.5em;
    filter: hue-rotate(414deg) brightness(1.15) saturate(1.4);
    //filter: hue-rotate(264deg) brightness(1.2) saturate(1.8);
    text-shadow: 1px 1px 0px rgba(#fff, 0.6);
    @media (min-width: $mq-med){
      font-size: calc(100% + 3.25vw);
    }
  }
}
//-------------------------------
//  animate container class
//-------------------------------
.animate{
  
  // Hide overflow for slice setup
  .mast__title {
    overflow-y: hidden;
    
    // Title children/letters
    & > *{
      display:inline-block;
      min-width: 0.1em;
      backface-visibility: hidden;
      animation: slide-up 0.6s $ease-cb-4 both;
      // Meat & Potatos of our stagger
      @include nth-ani-delay(20, 0.1s);
    }
  }
  
  // Text children/letters
  .mast__text > *{
    display: inline-block;
    min-width: 0.25em;
    animation: slide-right 0.6s $ease-cb-4 both;
    // Stagger mixin
    @include nth-ani-delay(70, 0.025s);
  }
  
  // Shake the tree
  .mast__icon{
    animation: shake-it 1.5s $ease-cb-4 both;
  }
}

//----------------------------------------------
// Keyframe animations
//----------------------------------------------
@keyframes slide-up{
  0% {
    opacity: 0;
    transform: translate3d(0,100%,0);
  }
  80%{
    opacity: 1;
  }
  100% {
    transform: translate3d(0,0,0);
  }
}

@keyframes slide-right{
  0% {
    opacity: 0;
    transform: translate3d(-2em,0,0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

@keyframes shake-it {
  0%, 100%{
    transform: rotate(0deg)
  }
  
  10%, 20%, 30%, 40%, 50%{
     transform: rotate(-6deg)
  }
  
  15%, 25%, 35%, 45%, 55%{
     transform: rotate(6deg)
  }
  
  60%, 70%, 80%, 90%{
     transform: rotate(-3deg)
  }
  65%, 75%, 85%, 95%{
     transform: rotate(3deg)
  }
}
View Compiled
/**
 * Spanizer
 * Wraps letters with spans, for css animations
 *
 * @example
  <h1 class="js-letters">Letters</h1>
 */
(function($) {
  var Spanizer = (function() {
    
    /**
     * Global settings
     */
    var settings = {
      letters: $('.js-letters'),
      mast: $('.mast'),
      btn: $('.btn'),
      animateClass: 'animate',
    };
    
    return {
      
      /**
       * Init
       */
      init: function() {
        this.bind();
      },
      
      /**
       * Bind Events
       */
      bind: function(){
        // Spanize Letters
        Spanizer.doSpanize();
        // Refresh animation
        settings.btn.on( 'click', function(e){
          e.preventDefault();
          Spanizer.refreshAnimation();
        });
      },
      
      /**
       * Spanizer
       * Wraps letters in a span
       */
      doSpanize: function(){
      settings.letters.html(function (i, el) {
        var spanize = $.trim(el).split("");
        var template = '<span>' + spanize.join('</span><span>') + '</span>'
        return template;
      });
    },
      /**
       * Refresh/Rerun our animation
       */
      refreshAnimation: function(){
        settings.mast.removeClass(settings.animateClass);
        mast.offsetWidth = mast.offsetWidth;  
        settings.mast.addClass(settings.animateClass);
      },
    };
  })();
  // Let's GO!
  Spanizer.init();
})(jQuery);

External CSS

  1. https://fonts.googleapis.com/css?family=Fredoka+One|Shrikhand
  2. https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js