GreenSock Webinar
June, 2016
Carl Schooff | greensock.com | @greensock
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
GreenSock: MorphSVG
Chris Gannon: SVG Missile
Johan Strömqvist: Crab #5 – Bob's walking cycle
Tools of GSAP
-
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
Why GSAP for HTML5 Banners?
-
SWF format is dead in the browser (mobile & desktop)
-
Web needs a robust animation runtime
Zero file size cost!
Text
Text
Text
Text
Smooth like Flash (or better)
-
Craig Wheatley: Mazda
-
VolcanoFlash: World of Tanks
-
Oliver15Years: Nestea
Better for client review
Hands on
-
Deconstructing an ad
-
Modular workflow
Core Strengths of GSAP
-
It "just works"...everywhere!
-
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
Official GreenSock Training
On-site GSAP Training with Carl Available
Learning Resources
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
GreenSock Webinar June 2016
By GreenSock
GreenSock Webinar June 2016
- 2,946