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

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

In low quantities, any tool will suffice.

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

Very few tools solve these problems.

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)

Very few tools excel on this front.

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 is the industry leader in flexibility

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!

Made with Slides.com