Zach Schnackel

GSAP'in

Jan 5th, 2017

It's hard to believe it's been a year and a half since I first started playing around with GSAP. And unlike that new JavaScript framework that just came out yesterday (yes this statement applies no matter when you're reading this), I still find it to be an indispensable tool for building smooth and succinct user experiences.

I've given talks about it, built CSS/JS frameworks utilizing it, and helped tell brand stories with it. Rather than go through the ins-and-outs as you'd find in most any other blog post about it, here's a few good resources that I used when I was getting started and still use to this day.

  • GreenSock docs: The official go-to. Unlike some reference-guides, this provides detailed write-ups and clear examples.
  • I Hate Tomatoes: If you've been mulling around the GSAP community, then no-doubt have you come across the name Petr Tichy. He's got a real knack for putting things in layman terms. I've also found him to be incredibly insightful in tearing apart real world examples to find their inner-workings.
  • Chris Gannon: Not only is Chris also great at stepping through his work on his YouTube channel, but his mastery of SVG filters is really something else. Don't let him tell you any different.
  • CodePen: The perfect place to take something cool, fork it, and make it your own. A great way to journey into breaking things and fixing them again. In-fact, if you ask for support on GSAP's forums, they'll ask you to create a CodePen so they can see things in action.

I thought I'd also take this opportunity to highlight some of the cool experiments I've had the opportunity of working on that included GSAP.

See the Pen Droplet animation by DigitalOcean (@digitalocean) on CodePen.

See the Pen Exponential growth animation by DigitalOcean (@digitalocean) on CodePen.

See the Pen The Wave by DigitalOcean (@digitalocean) on CodePen.


See the Pen SVG Loaders by Zach Schnackel (@zslabs) on CodePen.