GreenSock has created a really powerful animation tool called GreenSock Animation Platform (GSAP). For more than 10 years, GSAP has held its head high above the water, drowning many other animation tools which couldn’t keep up.

Today, we’ll be recreating a text animation found on the Sketch homepage using GSAPs stagger method. In comparison to my previous article, where we wrote static HTML to create this effect, we’ll be using Javascript to dynamically generate it for us.

Instructions / follow along

So to follow along with this article you can open up your own text editor, but I also created a couple of Sandboxes for you to follow along without having to touch any code yourself.

These are the steps we will be following:

HTML Layout

Setting up Javascript

Animating using GSAP

That’s all you’ll need 😄

HTML Layout

First off, we’ll be starting with creating a so-called “textWrapper”. Inside it is where we’ll place the entire sentence.

<div class="textWrapper">

</div>

So far, nothing crazy. With some simple CSS styling, we get a page looking like this: