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

• Getting Started Guide

• GreenSock tutorials and videos

• API documentation

• Support forums

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

• TweenLite

• TweenMax

• TimelineLite

• TimelineMax

• 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.

Click here to see video montage of HTML5 Banners

DoubleClick Resources

• DoubleClick Creative Solutions Help

• Rich Media Gallery

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.

MorphSVGPlugin

DrawSVGPlugin

ThrowPropsPlugin 

ScrambleTextPlugin

SplitText

Physics2DPlugin 

Thanks!

• Get started at greensock.com/get-started-js/
• Follow @greensock
• 2-day NYC class: nobledesktop.com/classes/greensock/
• Codepen demos: codepen.io/GreenSock