From: dotnetCarpenter <jon.ronnenberg@gmail.com>
Date: Sun, 25 Dec 2016 02:14:20 +0000 (+0100)
Subject: update documentation to reflect our new basic path animation support - closing #561
X-Git-Tag: 2.5.0~65
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=75b63526d978ad46d682efbce07709c56fa5e720;p=svg.js.git

update documentation to reflect our new basic path animation support - closing #561
---

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0277856..36dbeed 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@
 - updated dev dependencies; request and gulp-chmod - `npm run build` now requires nodejs 4.x
 - added code coverage https://coveralls.io/github/svgdotjs/svg.js (3e614d4)
 - added `npm run test:quick` which aim at being fast rather than correct - great for git hooks (981ce24)
+- added support for basic path animations (#561)
 
 # 2.3.6 (21/10/2016)
 - fixed leading and trailing space in SVG.PointArray would return NaN for some points (695f26a) (#529)
diff --git a/README.md b/README.md
index 9d1dd6a..1756ead 100644
--- a/README.md
+++ b/README.md
@@ -24,7 +24,7 @@ var draw = SVG('drawing').size(300, 300)
 var rect = draw.rect(100, 100).attr({ fill: '#f06' })
 ```
 The first argument can either be an id of the element or the selected element itself.
-Be aware that the HTML element must exist before running the svg.js code.
+Be aware that the HTML element must exist before running the SVG.js code.
 
 Given this HTML:
 
@@ -418,9 +418,19 @@ http://www.w3.org/TR/SVG/paths.html#PathData
 Paths can be updated using the `plot()` method:
 
 ```javascript
-path.plot('M100,200L300,400')
+path.plot('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80')
 ```
 
+The `plot()` method can also be animated:
+
+```javascript
+path.animate(2000).plot('M10 80 C 40 150, 65 150, 95 80 S 150 10, 180 80').loop(true, true)
+```
+
+There is only basic support for animating paths baked into SVG.js, which means that only paths with the same commands (`M`,`C`,`S` etc.) are animatable.
+
+If you need to animate paths that does not share the same commands in order, you can use https://github.com/Fuzzyma/svg.pathmorphing.js
+
 __`returns`: `itself`__
 
 ### array()
@@ -3147,7 +3157,7 @@ rect.on('myevent', function(e) {
 })
 ```
 
-svg.js supports namespaced events following the syntax `event.namespace`.
+SVG.js supports namespaced events following the syntax `event.namespace`.
 
 A namespaced event behaves like a normal event with the difference that you can remove it without touching handlers from other namespaces.