How to-animate-svg's-with snap.svg-js-library
-
Upload
horiguchi-seito -
Category
Technology
-
view
298 -
download
1
Transcript of How to-animate-svg's-with snap.svg-js-library
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 …
https://www.facebook.com/iioffice.cebu/
Tokyo, Nagano,
& Cebu in June!
Co-working Space
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
Hint Locations & Amount of anchor points must be same.
Hint 1. You can animate <g>
2. {"transform" : "r-15 t300 30 s1”} means …
Quoted: https://davidwalsh.name/svg-animations-snap
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
Thank you so much!