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

settings_tool

Interactive tools

AE_logo

RubberHose

Shape Layers

bodymovin_type

( 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

GenerateConf_2017

By Chris Gannon

GenerateConf_2017

These slides accompany Chris' talk at the Royal Institution in London for GenerateConf. https://www.youtube.com/watch?v=ZDFwBEXN0pM

  • 1,055
Loading comments...

More from Chris Gannon