fix keyframes script demo, amend api

.size-snapshot.json

@@ -5,8 +5,8 @@
     "gzipped": 2141
   },
   "dist/web.umd.js": {
-    "bundled": 86350,
-    "minified": 35585,
-    "gzipped": 12019
+    "bundled": 86586,
+    "minified": 35618,
+    "gzipped": 12035
   }
 }

API-OVERVIEW.md

@@ -1,11 +1,11 @@
 # Table of Contents 👇
 
-* [Springs and basic interpolation](#springs-and-basic-interpolation)
-* [Render props](#render-props)
-* [Native rendering and interpolation](#native-rendering-and-interpolation-demo)
-* [Imperative Api](#imperative-api)
-* [Transitions](#transitions)
-* [Parallax and page transitions](#parallax-and-page-transitions)
+- [Springs and basic interpolation](#springs-and-basic-interpolation)
+- [Render props](#render-props)
+- [Native rendering and interpolation](#native-rendering-and-interpolation-demo)
+- [Imperative Api](#imperative-api)
+- [Transitions](#transitions)
+- [Parallax and page transitions](#parallax-and-page-transitions)
 
 # API overview 📖
 
@@ -208,6 +208,61 @@ import { Trail } from 'react-spring'
 </Trail>
 ```
 
+### Keyframes
+
+`Keyframes` allow you to chain, compose and orchestrate animations by creating predefined slots. The resulting primitive behaves like the primitive it stems from, it can receive all generic properties like `native` or `from`, etc. You make it animate by passing the `state` props, which receives the named slot.
+
+```jsx
+import { Keyframes, config } from 'react-spring'
+
+// You can create keyframes for springs, trails and transitions
+const Container = Keyframes.Spring({
+    // Single props
+    show: { to: { opacity: 1 } },
+    // Chained animations (arrays)
+    showAndHide: [ { to: { opacity: 1 } }, { to: { opacity: 0 } }],
+    // Functions with side-effects
+    wiggle: async next => {
+        await next({ to: { x: 100 }, config: config.wobbly })
+        await delay(1000)
+        await next({ to: { x: 0 }, config: config.gentle })
+    }
+})
+
+<Container state="show">
+    {styles => <div style={styles}>Hello</div>}
+</Container>
+```
+
+Keyframes can also be used for manual scripting by giving it a function instead of an object consisting of slots (good for loops and such):
+
+```jsx
+import { Keyframes, config } from 'react-spring'
+
+// Will fade children in and out in a loop
+const Container = Keyframes.Spring(async next => {
+  while (true) {
+    await next({
+      reset: true,
+      from: { opacity: 0 },
+      to: { opacity: 1 },
+    })
+  }
+})
+
+<Container>
+    {styles => <div style={styles}>Hello</div>}
+</Container>
+```
+
+If you need to access the components own properties, you can (it works on all functions):
+
+```jsx
+const Container = Keyframes.Spring(async (next, ownProps) => {
+  // ...
+})
+```
+
 ### Parallax and page transitions
 
 `Parallax` creates a scroll container. Throw in any amount of layers and it will take care of moving them in accordance to their offsets and speeds.

API.md

@@ -16,12 +16,12 @@ import { config } from 'react-spring'
 */
 ```
 
-* tension, controls the initial plus force of the spring when let loose (default: 170)
-* friction, controls the opposition or antagonistic minus force (default: 26)
-* velocity, controls the initial velocity of the object attached to the spring (default: 0)
-* overshootClamping, controls if the spring should be clamped and not bounce (default: false)
-* restSpeedThreshold, precision (default: 0.0001)
-* restDisplacementThreshold, displacement precision (default: 0.0001)
+- tension, controls the initial plus force of the spring when let loose (default: 170)
+- friction, controls the opposition or antagonistic minus force (default: 26)
+- velocity, controls the initial velocity of the object attached to the spring (default: 0)
+- overshootClamping, controls if the spring should be clamped and not bounce (default: false)
+- restSpeedThreshold, precision (default: 0.0001)
+- restDisplacementThreshold, displacement precision (default: 0.0001)
 
 # Spring
 
@@ -218,23 +218,22 @@ class ParallaxLayer extends React.PureComponent {
 
 ```jsx
 export default class Keyframes extends React.Component {
-  static create = p => s => props => (
-    <Keyframes primitive={p} states={s} {...props} />
-  )
+  static create = primitive => states => {
+    if (typeof states === 'function') states = { [DEFAULT]: states }
+    return props => (
+      <Keyframes primitive={primitive} states={states} {...props} />
+    )
+  }
 
   // Factory functions, take an object with named slots.
   // A slot can be raw-props, an array of props, or an async function
   static Spring = Keyframes.create(Spring)
   static Trail = Keyframes.create(Trail)
   static Transition = Keyframes.create(Transition)
-  // Names slot
-  state: PropTypes.string,
+
   static propTypes = {
-    // deprecated: callback which receives a function that that takes two arguments:
-    //     script={async next => {
-    //         next(primitive, props)
-    //     }}
-    script: PropTypes.func,
+    // Name of the current slot
+    state: PropTypes.string,
   }
 }
 ```

examples/demos/timing/index.js

@@ -1,7 +1,16 @@
 import React from 'react'
-import { Spring, Keyframes, animated } from 'react-spring'
+import { Keyframes, animated } from 'react-spring'
 import { TimingAnimation, Easing } from '../../../src/addons'
 
+const Container = Keyframes.Spring(async next => {
+  while (true) {
+    await next({
+      from: { radians: 0, color: '#247BA0' },
+      to: { radians: 2 * Math.PI },
+    })
+  }
+})
+
 export default class TimingExample extends React.PureComponent {
   state = { items: ['item1', 'item2', 'item3'] }
 
@@ -16,7 +25,8 @@ export default class TimingExample extends React.PureComponent {
             willChange: 'transform',
             transform: radians.interpolate(
               r =>
-                `translate3d(0, ${50 * Math.sin(r + i * 2 * Math.PI / 5)}px, 0)`
+                `translate3d(0, ${50 *
+                  Math.sin(r + (i * 2 * Math.PI) / 5)}px, 0)`
             ),
           }}
           viewBox="0 0 400 400">
@@ -35,22 +45,14 @@ export default class TimingExample extends React.PureComponent {
           alignItems: 'center',
           background: 'palevioletred',
         }}>
-        <Keyframes
+        <Container
           reset
           native
           keys={items}
           impl={TimingAnimation}
-          config={{ duration: 2000, easing: Easing.linear }}
-          script={async next => {
-            while (true) {
-              await next(Spring, {
-                from: { radians: 0, color: '#247BA0' },
-                to: { radians: 2 * Math.PI },
-              })
-            }
-          }}>
+          config={{ duration: 2000, easing: Easing.linear }}>
           {Content}
-        </Keyframes>
+        </Container>
       </div>
     )
   }