Hi, I'm Seito from LIGinc. This says about the way of creating SVG animation with Snap.svg JS library for beginner. This presentation was made for Manila JavaScript. http://www.meetup.com/ja-JP/ManilaJavaScript/

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

2. Profile

3. Profile
Name : Seito
facebook: https://www.facebook.com/horiguchi.seito
Job : Front-End-Engineer / Manager
Company: LIGinc.
Live in : Cebu city & Tokyo

4. LIGinc. is …

5. http://liginc.co.jp/
7,000,000 PV
/ month
LIG BLOG

6. https://www.facebook.com/iioffice.cebu/
Tokyo,
Nagano,
& Cebu
in June!
Co-working Space

7. We need good Front-End-engineers in Cebu!
horiguchi_seito@liginc.co.jp
Hire!

8. Snap.svg.js

9. http://snapsvg.io/
Snap.svg.js

10. SVG animation library
What?
Other libraries are…
Raphael
SVG.js
TweenMax

11. - Simple
- Similar animate method in jQuery
- Supported by IE9
- Produced by Adobe
Feature

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

13. Try tutorial
- Create SVG

14. 1. Open ai file on illustrator

15. 2. File > Save a Copy…

16. 3. Format > SVG

17. good
bad
path, rect, polygon
You can use except <image>
Create SVG

18. Try tutorial
- Use Snap.svg.js

19. How to
You need only 3 steps

20. How to

21. How to

22. How to
(You can skip this step)

23. How to

24. Easing

25. SVG attribute & property

26. 5 sample demo

27. http://codepen.io/seito2014/pen/XdLXqo
1. fill animation

28. http://codepen.io/seito2014/pen/GZaXdN
2. SVG morfing

29. Hint
Locations & Amount of anchor points must be same.

30. http://codepen.io/seito2014/pen/Wwqrpj
3. transform

31. Hint
1. You can animate <g>
2. {"transform" : "r-15 t300 30 s1”} means …
Quoted: https://davidwalsh.name/svg-animations-snap

32. http://codepen.io/seito2014/pen/QNVpzM
4. Stroke animation

33. Hint
・getTotalLength()
・stroke-dasharray
・stroke-dashoffset
It's a long story, so please listen me later

34. http://codepen.io/seito2014/pen/WwqrmM?editors=1010
5. Call back

35. My work

36. http://studio-home.jp/
My work by Snap.svg.js

37. Thank you so much!