xyztlp · June 16, 2023 14:38
diff --git a/index.jade b/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 !
diff --git a/script.babel b/script.babel
 var letters = $('#demo span');

 TweenMax.staggerFrom(
  letters, 
  0.25, 
  { opacity:0, y: 200, ease: Back.easeOut },
  0.08
 );
diff --git a/scripts b/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>
diff --git a/stagger-text-animation-gsap.markdown b/stagger-text-animation-gsap.markdown
diff --git a/style.stylus b/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 }
	<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>

	@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 }