Chris Gannon
Motion & Interaction Designer
@chrisgannon
codepen.io/chrisgannon
A More Holistic Approach To SVG
THIS IS my
svg workflow
+
low hanging fruit
Digital Icon Pack
by Seth Eckert
http://bitbuilds.com/
Lovely!
Lovely! But
too difficult :(
Lovely!
low hanging fruit
Arcs
by Jeroen
http://codepen.io/jeroens
Super!
10% chunk
drawSVG:"20% 30%"
10% chunk
drawSVG:"60% 70%"
Mountain Graph
by Seth Eckert
http://setheckert.com
Lovely!
Too difficult :(
X-ray me (SVG Experiment)
by Noel Delgado
http://codepen.io/noeldelgado/
Tips and Tricks
Draw everything and reveal the bits
SVG text animation performance sucks
<clip-path> performance is better than <mask>
Apply clips/masks to a parent group
Gem Comet
by Sara Farnsworth
https://dribbble.com/sarafarnsworth
Lovely!
Lovely!
Lovely!
Lovely but too difficult :(
Rocket Ship Banner
by aepicos
http://codepen.io/aepicos
Lovely!
X
Too many anchor points
<use> element
Stolen!
Stolen!
Redrawn/stolen!
Googled/stolen!
My design based on NASA logo
low hanging fruit
(Lots of bits of)
Tips and Tricks
Set the source for <use> elements at 0,0
cloneNode has more flexibility than <use>
Clean up unnecessary anchor points
Use separate groups for masks and filters
High hanging fruit!
(FOR ME ANYWAY)
Tips and Tricks
ScrubGSAPTimeline.js
Separate nested groups for independent motion
Use filters sparingly
Introducing animation randomness adds value
The Trick Box
Chris Gannon
@chrisgannon
codepen.io/chrisgannon