GreenSock

• Jack Doyle: Founder and Author of GSAP

• Carl Schooff: Geek Ambassador

• Support volunteers and community advocates

• Innovating the GSAP API since 2006

Presentation Topics

• Brief overview of GSAP and its capabilities

• Why GSAP is ideal for scripted animation in banners and all HTML5 projects

• Explain basic tweens and timelines

• Workflow tips

• Hidden gems

• QnA

This presentation is not...

• A detailed tutorial on all GSAP features

• A comprehensive overview of best practices for HTML5 banner production

What is GSAP?

• Suite of high-performance JS animation tools
• Used on over 1.5 million sites 
• Majority of award-winning sites use GSAP (report)
• Universally adopted on every major ad network
• Used by top brands:

GSAP in Action

Now You See Me 2

Bose

The Next Rembrandt

GreenSock: MorphSVG

Chris Gannon: SVG Missile

Johan Strömqvist: Crab #5 – Bob's walking cycle

Tools of GSAP

• TweenLite

• TweenMax

• TimelineLite

• TimelineMax

• Plugins: css, bezier, attr, directionalRotation, etc.

• Eases: Elastic, Bounce, Rough, Stepped, SlowMo, etc.

• Bonus: SplitText, MorphSVG, DrawSVG, ThrowProps, ScrambleText and more!

Learn more greensock.com/gsap

Code Demo

• Basic TweenLite syntax

• Simple sequences using delayed tweens

• Timelines for flexibility and control

download zip of all code demos for this presentation

Why GSAP for HTML5 Banners?

• SWF format is dead in the browser (mobile & desktop)

• Google will stop accepting Flash ads on June 30

• Web needs a robust animation runtime

Zero file size cost!

Text

Text

Text

Text

Solutions For Banners in the Post-Flash World

Smooth like Flash (or better)

• Craig Wheatley: Mazda

• VolcanoFlash: World of Tanks

• Oliver15Years: Nestea

View Banners: portal.bannerwave.com

user: GreenSockWebinar

password: gsapftw

Better for client review

Hands on

• Deconstructing an ad

• Modular workflow

download zip of all code demos for this presentation

Created by BannerWave

http://greensock.com/gems

Core Strengths of GSAP

• It "just works"...everywhere!

• Solves real-world problems (workflow, prefixing, SVG)

• Excels at complex, story-telling animations

• Runtime controls

View animation and source codeon CodePen

Core Strengths of GSAP

• No dependencies (other libs or rendering layer)

• Plugin architecture

• Support and documentation

• Funded – not a side project or hobby

Official GreenSock Training

2-Day GSAP Class June 27-28

With Carl at Noble Desktop in NYC

Free Club GreenSock

Buy the Book / eBook

On-site GSAP Training with Carl Available

greensock.com/training

Learning Resources

• Getting Started Guide

• GreenSock tutorials and videos

• API documentation

• Support forums

Premium tools are free
to use on CodePen

• MorphSVGPlugin

• DrawSVGPlugin

• ThrowPropsPlugin 

• ScrambleTextPlugin

• SplitText

• Physics2DPlugin