Moving changelog & documentation to repo.

CHANGELOG.md

@@ -0,0 +1,38 @@
+**2.2.2** :: *7th Aug 2014*
+
+- Fixing another extremely rare jamming of animations. Rendering pipeline has been more streamlined so there shouldn't be more of this.
+
+**2.2.1** :: *18th Apr 2013*
+
+- Fixing extremely rare jamming of sprite based animations.
+
+**2.2.0** :: *11th Apr 2013*
+
+- Exposing `element` property.
+- Fixing immediate animation breaking other animations.
+
+**2.1.0** :: *6th Apr 2013*
+
+- Adding `width` & `height` options.
+
+**2.0.2** :: *5th Apr 2013*
+
+- Removing forgotten toggle event.
+
+**2.0.1** :: *5th Apr 2013*
+
+- Fixing `.to()` method not returning current instance.
+
+**2.0.0** :: *5th Apr 2013*
+
+- Dropping jQuery dependency.
+- Adding optional jQuery plugin version of Motio.
+- Improved events API.
+- Method `.toStart()` - when called on an animation that is already at the start - will repeat the animation from the end. Ditto for the `.toEnd()` method.
+- Methods `.toStart()`, `.toEnd()`, and `.to()` now accept callbacks.
+- Removed `toStart`, `toEnd`, and `to` events.
+- Added reversed sprite based animation playback by passing `true` into the `.play()` method's first argument.
+
+**1.0.0** :: *25th May 2012*
+
+The initial Motio version, dependent on jQuery.

README.md

@@ -17,9 +17,36 @@ Motio has no dependencies, but there is an optional
 
 Works everywhere.
 
-### [Changelog](https://github.com/darsain/motio/wiki/Changelog)
-
-Motio upholds the [Semantic Versioning Specification](http://semver.org/).
+## Usage
+
+Sprite animation mode:
+
+```js
+var element = document.querySelector('#sprite');
+var sprite = new Motio(element, {
+	fps: 10,
+	frames: 14
+});
+sprite.play();   // start animation
+sprite.pause();  // pause animation
+sprite.toggle(); // toggle play/pause
+```
+
+Seamless background panning mode:
+
+```js
+var element = document.querySelector('#panning');
+var panning = new Motio(element, {
+	fps: 30, // Frames per second. More fps = higher CPU load.
+	speedX: -30 // Negative horizontal speed = panning to left.
+});
+sprite.play();    // start animation
+sprite.pause();   // pause animation
+sprite.toggle();  // toggle play/pause
+sprite.toStart(); // animate to 1st frame and stop
+sprite.toEnd();   // animate to last frame and stop
+sprite.to(10);    // animate to 11th frame and stop
+```
 
 ## Download
 
@@ -39,23 +66,7 @@ When isolating issues on jsfiddle, you can use this URL:
 
 ## Documentation
 
-- **[Markup](https://github.com/darsain/motio/wiki/Markup)** - how should the HTML & CSS look like
-- **[Calling](https://github.com/darsain/motio/wiki/Calling)** - how to call Motio
-- **[Options](https://github.com/darsain/motio/wiki/Options)** - all available options
-- **[Properties](https://github.com/darsain/motio/wiki/Properties)** - accessible Motio object properties
-- **[Methods](https://github.com/darsain/motio/wiki/Methods)** - all available methods, and how to use them
-- **[Events](https://github.com/darsain/motio/wiki/Events)** - all available events, and how to register callbacks
-
-*Other languages are maintained by 3rd parties.*
-
-### Chinese
-
-- [Markup](http://strongme.github.io/Motio-Wiki-CN-Markup.html)
-- [Calling](http://strongme.github.io/Motio-Wiki-CN-Calling.html)
-- [Options](http://strongme.github.io/Motio-Wiki-CN-Options.html)
-- [Properties](http://strongme.github.io/Motio-Wiki-CN-Properties.html)
-- [Methods](http://strongme.github.io/Motio-Wiki-CN-Methods.html)
-- [Events](http://strongme.github.io/Motio-Wiki-CN-Events.html)
+Can be found in the [docs](https://github.com/darsain/motio/tree/master/docs) directory.
 
 ## Contributing
 

docs/Calling.md

@@ -0,0 +1,39 @@
+# Calling
+
+```js
+var motio = new Motio( frame [, options ] );
+```
+
+This will create a new Motio object, ready to be used. By default, everything is turned off, so calling the Motio with all default options will leave you with a dead FRAME that doesn't do anything.
+
+New Motio object is also paused, so if you want to immediately start the animation, you have to call the `.play()` method afterwards.
+
+The list & documentation of all methods available can be found in the [Methods documentation page](Methods.md).
+
+---
+
+### frame
+
+Type: `Element`
+
+DOM element of an object with animation background. Example:
+
+```js
+var motio = new Motio(document.getElementById('frame')); // Native
+var motio = new Motio($('#frame')[0]); // With jQuery
+```
+
+### options
+
+Type: `Object`
+
+Object with Motio options. All options are documented in the [Options Wiki page](Options.md).
+
+
+## Calling via jQuery plugin
+
+```js
+$('#frame').motio( [ options ] );
+```
+
+Initiating motio via a jQuery plugin automatically starts the animation, so you don't have to call the `.play()` method afterwards. You can disable this with [`startPaused`](Options.md#startpaused) option.

docs/Events.md

@@ -0,0 +1,50 @@
+# Events
+
+You can register callbacks to Motio events with `#on()` and `#off()` methods:
+
+```js
+var motio = new Motio(frame, options);
+
+// Register a callback to multiple events
+motio.on('play pause', fn);
+
+// Start playing the animation
+motio.play();
+```
+
+More usage examples can be found in the [on & off methods documentation](Methods.md#on).
+
+## Common arguments
+
+#### this
+
+The `this` value in all callbacks is the Motio object triggering the event. With it you have access to all [Motio object properties](Properties.md).
+
+#### 1st argument
+
+All callbacks receive the event name as the first argument.
+
+---
+
+Example:
+
+```js
+motio.on('frame', function (eventName) {
+	console.log(eventName); // 'frame'
+	console.log(this.frame); // frame index
+});
+```
+
+## Events
+
+### pause
+
+Triggered when animation is paused.
+
+### play
+
+Triggered when animation is resumed.
+
+### frame
+
+Triggered on each animation frame.

docs/Markup.md

@@ -0,0 +1,68 @@
+# Markup
+
+Motio animates the background position of an element passed to it. The background can be a seamless image (panning animation), or an animation frames sprite (sprite based animation).
+
+### Example
+
+You have an element with background that holds either seamless repeating image (for panning), or animation frames sprite (sprite based animation).
+
+```html
+<div id="panning" class="panning"></div>
+<div id="sprite" class="sprite"></div>
+```
+
+The size and background of the elements is handled by your CSS.
+
+```css
+.panning {
+	width: auto; // Span to the full width of container
+	height: 300px;
+	background: url('seamless-sky.jpg');
+}
+
+.sprite {
+	width: 256px; // Width of one animation frame
+	height: 256px; // Height of one animation frame
+	background: url('animation_frames_sprite.png');
+}
+```
+
+Motio calls than look like this:
+
+```js
+// Panning
+var element = document.querySelector('#panning');
+var panning = new Motio(element, {
+	fps: 30, // Frames per second. More fps = higher CPU load.
+	speedX: -30 // Negative horizontal speed = panning to left.
+});
+sprite.play(); // start animation
+
+// Sprite
+var element = document.querySelector('#sprite');
+var sprite = new Motio(element, {
+	fps: 10,
+	frames: 14
+});
+sprite.play(); // start animation
+```
+
+Motio knows that animation is sprite based when you set the `frames` option.
+
+Initiating animation with `#play()` method is not needed when calling via a jQuery proxy, as in this case the animation is initiated automatically after `new Motio` object has been created. Motio assumes that you are using jQuery proxy just to initiate animation and leave it alone. Calling methods and controlling the Motio animations via jQuery proxy, even when possible, just doesn't make sense. There is a `new Motio`, why would you even selector proxy everything... ?
+
+For more options and methods and everything, [RTFM](README.md).
+
+## Panning
+
+There are no rules in the panning mode. Just give element a background, and pass it to Motio.
+
+## Sprite
+
+To have a correctly working sprite based animation, you need an element that is the exact size of a one animation frame. Example:
+
+![Sprite markup](http://i.imgur.com/Sazfe0Q.png)
+
+This means that the element width & height (specifically the element's border box size) has to equal the width & height of one animation frame. The element size is set by you in CSS. You can set padding, margin, and border, Motio will still work, as long as the border-box size equals the size of one frame. The only thing that'll break it is changing the `background-origin`. So don't touch that :)
+
+Also, calling spriote based Motio on hidden elements just doesn't work, as Motio cannot retrieve their size. In this case, use [`width`](Options.md#width) & [`height`](Options.md#height) options to set the width and height of the element manually.