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

Blur

(feGaussianBlur)

Alpha boost (feColorMatrix)

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

ScrubGSAPTimeline

SCRUBBODYMOVINTIMELINE

Granular control

Invisible UI

Uses existing input (mouse)

https://github.com/chrisgannon/ScrubGSAPTimeline

Convert GreenSock SVG timeline animations to GIF

https://github.com/chrisgannon/SVG2GIF

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!

CHRIS GANNON

Interactive Web Animation

@chrisgannon