docs: add Animation docs

README.md

@@ -83,7 +83,7 @@ const MyComponent = mock();
   - [Animation](./docs/en/Animation.md)
      - [`<AfterTimeout>`](./docs/en/AfterTimeout.md), [`<AfterDraf>`](./docs/en/AfterDraf.md), and [`<WhenIdle>`](./docs/en/WhenIdle.md)
      - [`<Render>`](./docs/en/Render.md), [`withRender()`](./docs/en/Render.md#withrender-hoc), and [`@withRender`](./docs/en/Render.md#withrender-decorator)
-     - [`<RenderInterval>`](./docs/en/RenderInverval.md), [`withRenderInterval()`](./docs/en/RenderInverval.md#withrenderinterval-hoc), and [`@withRenderInterval`](./docs/en/RenderInverval.md#withrenderinterval-decorator)
+     - [`<RenderInterval>`](./docs/en/RenderInterval.md), [`withRenderInterval()`](./docs/en/RenderInterval.md#withrenderinterval-hoc), and [`@withRenderInterval`](./docs/en/RenderInterval.md#withrenderinterval-decorator)
      - [`<Tween>`](./docs/en/Tween.md), [`withTween()`](./docs/en/Tween.md#withtween-hoc), and [`@withTween`](./docs/en/Tween.md#withtween-decorator)
      - [`<Interpolation>`](./docs/en/Interpolation.md), [`withInterpolation()`](./docs/en/Interpolation.md#withinterpolation-hoc), and [`@withInterpolation`](./docs/en/Interpolation.md#withinterpolation-decorator)
   - [Side Effects](./docs/en/Side-effects.md)

docs/en/Animation.md

@@ -0,0 +1,11 @@
+# Animation
+
+Below primitives are available to do basic animation in JavaScript.
+
+- [`<AfterTimeout>`](./AfterTimeout.md) &mdash; renders children after a timeout.
+- [`<AfterDraf>`](./AfterDraf.md) &mdash; renders children after double `requestAnimationFrame`.
+- [`<WhenIdle>`](./WhenIdle.md) &mdash; renders children on browser idle time.
+- [`<Render>`](./Render.md) &mdash; re-renders children on every `requestAnimationFrame`.
+- [`<RenderInterval>`](./RenderInterval.md) &mdash; re-renders children at a specified frame rate per second.
+- [`<Tween>`](./Tween.md) &mdash; applies an easing function to animation duration value from `<Render>`.
+- [`<Interpolation>`](./Interpolation.md) &mdash; interpolates a map of values using a `<Tween>`.

docs/en/Interpolation.md

@@ -6,7 +6,7 @@ a value in `[0...1]` range it interpolates a map of values you define.
 
 ## Usage
 
-Below code animates movement of 100x100px square.
+Below code animates movement of a 100x100px square.
 
 ```jsx
 import {Interpolation} from 'libreact/lib/Interpolation';
@@ -29,6 +29,13 @@ import {Interpolation} from 'libreact/lib/Interpolation';
 ```
 
 
+## Props
+
+Accepts all the [`<Tween>`](./Tween.md) props in addiont to:
+
+- `map` &mdash; required, map of `[start, end]` values to interpolate.
+
+
 ## `withInterpolation()` HOC
 
 Injects an `interpolation` prop into your component.

docs/en/README.md

@@ -52,7 +52,7 @@
   - [Animation](./Animation.md)
      - [`<AfterTimeout>`](./AfterTimeout.md), [`<AfterDraf>`](./AfterDraf.md), and [`<WhenIdle>`](./WhenIdle.md)
      - [`<Render>`](./Render.md), [`withRender()`](./Render.md#withrender-hoc), and [`@withRender`](./Render.md#withrender-decorator)
-     - [`<RenderInterval>`](./RenderInverval.md), [`withRenderInterval()`](./RenderInverval.md#withrenderinterval-hoc), and [`@withRenderInterval`](./RenderInverval.md#withrenderinterval-decorator)
+     - [`<RenderInterval>`](./RenderInterval.md), [`withRenderInterval()`](./RenderInterval.md#withrenderinterval-hoc), and [`@withRenderInterval`](./RenderInterval.md#withrenderinterval-decorator)
      - [`<Tween>`](./Tween.md), [`withTween()`](./Tween.md#withtween-hoc), and [`@withTween`](./Tween.md#withtween-decorator)
      - [`<Interpolation>`](./Interpolation.md), [`withInterpolation()`](./Interpolation.md#withinterpolation-hoc), and [`@withInterpolation`](./Interpolation.md#withinterpolation-decorator)
   - [Side Effects](./Side-effects.md)

docs/en/Tween.md

@@ -40,22 +40,22 @@ You can use one of the built-in easing functions simply specifying its name as a
 - `quadratic` — accelerates fast, then slows quickly towards end.
 - `cubic` — overshoots over 1 and then returns to 1 towards end.
 - `elastic` — overshoots over 1 multiple times - wiggles around 1.
-- `circ` &mdsah; Commonly known as `outCirc`. Moves very fast at the beginning and
+- `circ` — Commonly known as `outCirc`. Moves very fast at the beginning and
 then quickly slows down in the middle. This tween can actually be used
 in continuous transitions where target value changes all the time,
 because of the very quick start, it hides the jitter between target value changes.
 - `inQuad` — accelerating from zero velocity
 - `outQuad` — decelerating to zero velocity.
 - `inOutQuad` — acceleration until halfway, then deceleration.
 - `inCubic` — accelerating from zero velocity.
-- `outCubic` &mdsah; decelerating to zero velocity.
+- `outCubic` — decelerating to zero velocity.
 - `inOutCubic` — acceleration until halfway, then deceleration.
-- `inQuart` &mdsah; accelerating from zero velocity.
-- `outQuart` &mdsah; decelerating to zero velocity.
-- `inOutQuart` &mdsah; acceleration until halfway, then deceleration.
-- `inQuint` &mdsah; accelerating from zero velocity.
-- `outQuint` &mdsah; decelerating to zero velocity.
-- `inOutQuint` &mdsah; acceleration until halfway, then deceleration.
+- `inQuart` — accelerating from zero velocity.
+- `outQuart` — decelerating to zero velocity.
+- `inOutQuart` — acceleration until halfway, then deceleration.
+- `inQuint` — accelerating from zero velocity.
+- `outQuint` — decelerating to zero velocity.
+- `inOutQuint` — acceleration until halfway, then deceleration.
 
 
 ## Cubic-Bezier