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
- GSAP is 20x faster than jQuery
- GPU-accelerated
- Avoids layout thrashing, adjusts for lag
- Mobile friendly
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:
- Basic CSS styles
- Complex DOM properties
- Storytelling
- Rich, dynamic interactions
Got suggestions?
I'm listening.
Thanks!
- Get started at greensock.com/get-started-js/
- Follow @greensock
- Codepen demos: codepen.io/GreenSock
Chicago HTML5 Meetup, April 2015
By GreenSock
Chicago HTML5 Meetup, April 2015
- 2,099