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