HTML5 Animation with GreenSock

Noble Desktop

Navigate: Right/Left Arrows (or Swipe on Slide’s Content)
Zoom Out: Press Esc (or Pinch)
If keystrokes don’t work, click here & try again.

Today’s Agenda

  • Overview of GreenSock
  • Example Web Animations
  • Things To Know about Ad Banners (with Examples)
  • Live Coding Demo
  • Cool Plugins
  • Wrap Up

What is GreenSock?

The GreenSock Animation Platform (GSAP) is a JavaScript library focused solely on animation.

It enables you to create ultra high-performance,
professional-grade HTML5 animation for the modern web.

GSAP is not an app. Use HTML & CSS to code the content and use GSAP & JavaScript to code the animation.

Things to Know about GSAP

  • It’s been around since 2006.
  • Used on over 3 million websites & used by top brands: Top Company Logos
  • Majority of award-winning sites use GSAP (view report).
  • Universally accepted on every major ad network.

What People Say About It

A comparison of animation technologies on says GSAP “is far and away my favorite library to work with”.

Why use GSAP?

Examples of GSAP

What About Ads?

Not counted in file size!

Solutions For Banner Ads in the Post-Flash World

Example Ads

More Example Ads

Tools of GSAP

  • GSAP is modular. Load only what you need to keep the file size small.
  • TweenLite & TimelineLite offer basic functionality.
  • TweenMax & TimelineMax offer more functionality.
  • You can add Plugins (CSS, SplitText, DrawSVG, MorphSVG) and Eases (Elastic, Bounce, Rough, etc.).

Let’s Code Some GSAP!

Live Demo


Add functionality beyond GSAP’s core features.


About SplitText


About DrawSVG


About MorphSVG

Core Strengths

  • GSAP “just works” everywhere.
  • Excels at complex, story-telling animations.
  • Solves real-world problems (workflow, prefixing, SVG).
  • No dependencies. (It can work with libraries such as jQuery, but does not rely on them.)
  • Documentation and Support
  • Funded (not a side project or hobby)


Learn More

HTML5 Animation with GreenSock (GSAP)
Class or Book

Noble Desktop