GSAP for HTML5 Banners
October, 2015
Carl Schooff | greensock.com | @greensock
GreenSock
- Jack Doyle: Founder and Author of GSP
- Carl Schooff: Geek Ambassador
- Support volunteers and community advocates
- Innovating the GSAP API since 2006
Presentation Topics
- Brief overview of what GSAP is and can do.
-
Why GSAP is such a great choice for scripted animation in HTML5 banners.
-
Show how to build an animated ad with GSAP.
-
Update on industry-wide support for GSAP.
-
Address what still needs to be done in the industry and what you can do to help.

This presentation is not...
-
A detailed beginners tutorial on all the features of GSAP.
-
A comprehensive overview of all the best practices for HTML5 banner production.
Resources for Learning GSAP
Official GreenSock Training

Onsite GSAP Training with Carl Available
Contact Noble Desktop for more details educator-in-chief@nobledesktop.com
GSAP in Action
GreenSock: MorphSVG
Chris Gannon: SVG Missile
What is GSAP?
- Suite of high-performance JS animation tools
- Used on over 670,000 sites (BuiltWith Usage Stats)
- Used by major brands:

Tools of GSAP
-
Plugins: css, bezier, directionRotation, colorProps, attr, roundProps
-
Eases: Power0-4, Rough, Stepped, SlowMo, Elastic, Bounce, Back and more.
- Bonus: SplitText, MorphSVG, DrawSVG, ThrowProps, ScrambleText and more!
Learn more greensock.com/gsap
Core Strengths of GSAP
- Built for professionals, yet beginner friendly
Solves real-world problems (workflow, prefixing, SVG)
- Excels at complex, story-telling animations
Runtime controls
Core Strengths of GSAP
- No dependencies (other libs or rendering layer)
-
Plugin architecture
-
Support and documentation
- Funded – not a side project or hobby
Why GSAP for HTML5 Banners?
- The swf format is dead in the browser (mobile and desktop).
- The web needs a strong animation runtime.

Hands On
Building an HTML5 Banner with GSAP
Latest Victories
-
IAB is educating the industry on how HTML5 ads need many external resources.
-
IAB recommends that standard display ads (non rich media) allow for 200kb zipped.
-
DoubleClick is hosting GSAP and will soon auto-detect it.
- Adwords encourages GSAP use.
Latest Victories

Text
Text
Text
Text
DoubleClick Resources
Work to be done
-
IAB sending mixed messages about CDN hosting.
-
Pointing to publishers to "figure it out".
-
Still encouraging common shared libraries to be packaged with ads and count towards file size.
-
AdWords recommends that GSAP is packaged with the ad.
- Get involved: The kilobyte conundrum.
All GreenSock premium tools
are free to use on CodePen.
Thanks!
- Get started at greensock.com/get-started-js/
- Follow @greensock
- 2-day NYC class: nobledesktop.com/classes/greensock/
- Codepen demos: codepen.io/GreenSock

GSAP for HTML5 Banner Ads
By GreenSock
GSAP for HTML5 Banner Ads
- 5,926