Stagger Text Animation - GSAP

index.jade

#demo
  span.color-1 H
  span.color-2 e
  span.color-3 l
  span.color-4 l
  span.color-1 o
  span.color-2 &nbsp
  
  span.color-2 Y
  span.color-3 o
  span.color-4 u
  span.color-1 !

script.babel

var letters = $('#demo span');

TweenMax.staggerFrom(
  letters, 
  0.25, 
  { opacity:0, y: 200, ease: Back.easeOut },
  0.08
);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

stagger-text-animation-gsap.markdown

Stagger Text Animation - GSAP

A silly little animation inspired by the awesome nuageapp.com website.

A Pen by Simon Vrachliotis on CodePen.

License.

style.stylus

@import url('https://fonts.googleapis.com/css?family=Bungee+Inline')

body
  font-family 'Bungee Inline', sans-serif

#demo
  display flex
  justify-content center
  align-items center
  position absolute
  top 0
  left 0
  height 100%
  width 100%
  span
    font-size 10vw
    font-weight 400
    
.color-1 { color: tomato }
.color-2 { color: #bada55 }
.color-3 { color: deeppink }
.color-4 { color: #0099aa }