Web Animation with SVG and Greensock

Ryan Leichliter | @RyanLeichliter

What is an SVG?

• Scalable Vector Graphic

 - an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.

 - Great for responsive websites.

 - Can be embedded inline or like a regular img.

Can I Use SVG?

What is Greensock?

A powerful JS animation platform, that lets you animate almost any DOM element properties, CSS values, canvas objects, SVG elements, and more.

Why use Greensock?

• Not JQuery dependent

• Fast

• Simple syntax

• Cross Browser compadibility

- even IE 6

Why use Greensock?

Chrome

IE & Opera

Safari

Firefox

When to use Greensock?

• What are you animating?

• How much are you animating?

• What browsers do you need to support?

Greensock workflow features

• Timelines

• Nested Timelines

• Draggable

• DrawSVG

• Stagger

• MorphSVG

What can you do with Greensock?

SVG & Greensock for UI

SVG & Greensock for UI

SVG & Greensock for UI

Koch Hazard Interactive Map

SVG & Greensock for animation

SVG & Greensock for animation

SVG & Greensock for animation

Fort Lauderdale - Marriott

SVG & Greensock for animation & UI

Lemonly's Visual Quiz

Questions?

Thanks!