Chicago HTML5 Meetup
April 7, 2015
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:
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?
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)
- boxShadow: "10px 10px 5px #00FFCC;"
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
- Bezier curves
- Mouse position dependent
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:
- Basic CSS styles
- Complex DOM properties
- Rich, dynamic interactions
Chicago HTML5 Meetup, April 2015