Carl Schooff | greensock.com | @greensock
GSAP Workflow Tips
CSS Summit 2016
Welcome
-
Carl Schooff: Geek Ambassador
-
Support and training
1998
2010
Welcome
-
Jack Doyle: Founder and Author of GSAP
This presentation is about
- Timelines
- Workflow tips
- Advanced features
- Experimentation
- Real-world challenges
Audience
- Those who want to take their GSAP skills to next level
- Anyone interested in web animation
What is GSAP
- GreenSock Animation Platform
- A suite of high-performance JS tools for animation
- Create animation with code
Basic Tween
Basic Timeline
Animation Objects
- Tweens and timelines both inherit from an Animation class
- They share the same core methods and properties
play()
pause()
resume()
reverse()
seek()
progress()
restart()
timeScale()
delay()
duration()
isActive()
kill()
startTime()
time()
timeScale()
eventCallback()
...and more
- Your application logic doesn't need to be concerned with which type of Animation object it is dealing with
Demonstrate
Key Timeline Features
- keeps code modular
- change order of sections
- tweak overlap / offset
- change speed of section
GreenSock Home Page Animation
Demonstrate
Functions Returning Timelines
Re-usable Effects
Create functions that return animations with
complex movement
Tween a tween! Huh?
- progress()
- timeScale()
- time()
Animation objects have numeric,
function-based properties that can
be tweened
Solving Common, Real-world Problems
Advanced SVG Shape Morphing
Intercept and modify values while tween is running
Demo: Snap to 45 degree increments
Intercept and modify values while tween is running
Demo: Seamless carousel wrap
Solve transform-origin issues with SVG elements
Demo: transformOrigin vs svgOrigin
Drag, spin and throw SVG elements
Demo: Draggable and SVG
Create staggered, alternating and randomized effects
Demo: Staggered animations using cycle
GSAP Strengths
-
No dependencies (other libs or rendering layer)
-
Plugin architecture
-
Support and documentation
-
Funded – not a side project or hobby
-
Used on over 1.5 million sites
-
Majority of award-winning sites use GSAP (report)
-
Universally adopted on every major ad network
Learning Resources
Thanks!
CSS Summit: GSAP Workflow Tips
By GreenSock
