Chicago HTML5 Meetup

April 7, 2015

Jack Doyle |  greensock.com  |  @greensock

Who am I?

• Jack Doyle
• Did lots of animation for the advertising industry
• Love animation almost as much as bacon
• Built GSAP

What is GSAP?

• Suite of high-performance JS animation tools
• Recommended by Google
• Used by major brands:

Examples

• US Open Sessions
• McDonald's 100 Moments
• Bright Media
• Many more

Most importantly, GSAP
Solves real-world problems

Too many choices!

• Rendering layer: DOM, canvas, WebGL, SVG?
• Animation tools: CSS animations/transitions,
  jQuery, GSAP, Velocity, famo.us, Rekapi, Zepto,
  Web Animations, Adobe Edge Animate, GWD?

Choose wrong?

Wasted effort

May get stuck

4 types of animation tasks

Which one do you perform most?

1) Basic CSS styles

• Fade in, fade out
• top, left, margin, width, height, etc.

You want: performance

• GSAP is 20x faster than jQuery
• GPU-accelerated
• Avoids layout thrashing, adjusts for lag
• Mobile friendly

2) Complex DOM properties

• Transforms (scale, rotation, position, 3D)
• Colors
• boxShadow: "10px 10px 5px #00FFCC;"
• SVG

You want: compatibility

• Fix browser bugs & inconsistencies (SVG example)
• Auto prefix, convert units
• 2D transforms in IE8

3) Storytelling animation

• Linear sequence
• Banner ads

You want: smooth workflow

• Play with timing, eases, staggering
• Group animations into scenes, nest timelines,
  loop entire sequences
• seek(), reverse(), play(), pause(), timeScale(), etc.
• Jump to the spot you're working on (example)

4) Rich, dynamic interactions

• Physics
• Bezier curves
• Mouse position dependent
• Gaming
• Canvas/WebGL

You want: features & flexibility

• Animate anything JS can touch (no need to rebuild in proprietary ecosystem). Canvas, DOM, SVG, whatever
• Plugins & extras like DrawSVG, Physics2D, ThrowProps, SplitText, ScrambleText, etc.
• Synchronized architecture

GSAP solves real-world problems
in all 4 types of animation:

1. Basic CSS styles
2. Complex DOM properties
3. Storytelling
4. Rich, dynamic interactions

Got suggestions?

I'm listening.

Thanks!

• Get started at greensock.com/get-started-js/
• Follow @greensock
• Codepen demos: codepen.io/GreenSock