How to Animate SVG's with Snap.svg JS Library

Profile

Profile

Name : Seito

facebook: https://www.facebook.com/horiguchi.seito

Job : Front-End-Engineer / Manager

Company: LIGinc.

Live in : Cebu city & Tokyo

LIGinc. is …

http://liginc.co.jp/

7,000,000 PV / month

LIG BLOG

https://www.facebook.com/iioffice.cebu/

Tokyo, Nagano,

& Cebu in June!

Co-working Space

We need good Front-End-engineers in Cebu!

horiguchi_seito@liginc.co.jp

Hire!

Snap.svg.js

http://snapsvg.io/

Snap.svg.js

SVG animation library

What?

Other libraries are… Raphael

SVG.js TweenMax

- Simple

- Similar animate method in jQuery

- Supported by IE9

- Produced by Adobe

Feature

By the way … You should use Javascript like Snap.svg.js than CSS3 for all browsers.

Try tutorial - Create SVG

1. Open ai file on illustrator

2. File > Save a Copy…

3. Format > SVG

good

bad

path, rect, polygon

You can use except <image>

Create SVG

Try tutorial - Use Snap.svg.js

How to

You need only 3 steps

How to

How to

How to

(You can skip this step)

How to

Easing

SVG attribute & property

5 sample demo

http://codepen.io/seito2014/pen/XdLXqo

1. fill animation

http://codepen.io/seito2014/pen/GZaXdN

2. SVG morfing

Hint Locations & Amount of anchor points must be same.

http://codepen.io/seito2014/pen/Wwqrpj

3. transform

Hint 1. You can animate <g>

2. {"transform" : "r-15 t300 30 s1”} means …

Quoted: https://davidwalsh.name/svg-animations-snap

http://codepen.io/seito2014/pen/QNVpzM

4. Stroke animation

Hint

・getTotalLength()

・stroke-dasharray

・stroke-dashoffset

It's a long story, so please listen me later

http://codepen.io/seito2014/pen/WwqrmM?editors=1010

5. Call back

My work

http://studio-home.jp/

My work by Snap.svg.js

Thank you so much!