CHRIS GANNON
Interactive designer & animator
@chrisgannon
Improve workflow
Combine and conquer
Experiment
Improve client experience
better visual feedback
Focus on details
Have fun!
Improve user experience
G ALS
Thanks for putting something charming in my overwhelmingly grim feed this morning.
S uirrel Loader
Me and G
Blur
(feGaussianBlur)
Alpha boost (feColorMatrix)
The Power of random
Useful To ls for clients
Interactive tools
RubberHose
Shape Layers
( JSON + JS Library )
After Effects
(video/animation software)
LOTTIE
DrawSVGPlugin
MorphSVGPlugin
GreenSock ( GSAP )
(JavaScript libraries)
Physics2DPlugin
ThrowPropsPlugin
tWEENMAX
Draggable
+
+
Illustrator Asset Export panel
Stagger & Cycle
coolors.co
thenounproject.com
Custom Workflow tools
ScrubGSAPTimeline
SCRUBBODYMOVINTIMELINE
Granular control
Invisible UI
Uses existing input (mouse)
Convert GreenSock SVG timeline animations to GIF
Expression shortcuts
Automate monotonous tasks
Adds missing functionality
Animation with Bodymovin
Shape layers
RubberHose
GreenSock with Draggable
There are more ways than ever to create interactive animations
Combining tools, approaches and techniques gives a richer experience
These are really exciting times
for interactive web animation!
THANKs FOR COMING!
CHRIS GANNON
Interactive Web Animation
@chrisgannon