Chris Gannon
Motion & Interaction Designer
@chrisgannon
codepen.io/chrisgannon
how to animate svg
with greensock
SVG TOOLS
THIS IS my
svg workflow
+
SVG TOAST!
gannon.tv/
svgTOAST
Draw the bits we need and group them on SEPARATE, NAMED LAYERS
DRAW A rectangle THAT'S THE SAME DIMENSIONS AS THE ARTBOARD -
VERY IMPORTANT!
COPY/PASTE THE GRAPHICS FROM ARTBOARD
TO TEXT EDITOR
CHANGE THE IDS TO CLASSES
REMOVE ALL THE UNNECESSARY CRAP THAT
ALL
VECTOR SOFTWARE INSISTS ON ADDING
COPY/paste INTO CODEPEN
+
CREATE THE MAIN TIMELINEMAX
AND CHAIN LOTS OF TWEENMAX TWEENS
CREATE SECONDARY TIMELINES AND TRIGGER THEM FROM THE MAIN ONE
ADJUST EASES AND TIMINGS
DO A SNAZZY DANCE
FORK THIS AND CODE WITH ME
gannon.tv/
svgTOAST
STOP TALKING.
START CODING.
@chrisgannon
@chrisgannon
Made with Slides.com