xyztlp · June 16, 2023 14:38 · Oct 24, 2016
diff --git a/index.jade b/index.jade
@@ -0,0 +1,12 @@
+#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
@@ -0,0 +1,8 @@
+var letters = $('#demo span');
+
+TweenMax.staggerFrom(
+  letters, 
+  0.25, 
+  { opacity:0, y: 200, ease: Back.easeOut },
+  0.08
+);
diff --git a/scripts b/scripts
@@ -0,0 +1,2 @@
+<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
@@ -0,0 +1,7 @@
+Stagger Text Animation - GSAP
+-----------------------------
+A silly little animation inspired by the awesome nuageapp.com website.
+
+A [Pen](http://codepen.io/simonswiss/pen/dpQmdy) by [Simon Vrachliotis](http://codepen.io/simonswiss) on [CodePen](http://codepen.io/).
+
+[License](http://codepen.io/simonswiss/pen/dpQmdy/license).
diff --git a/style.stylus b/style.stylus
@@ -0,0 +1,23 @@
+
+@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 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<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>
No results found