Merge branch 'master' of https://github.com/drcmda/react-spring

Author: drcmda

readme.md

@@ -4,7 +4,7 @@
 
 # Why 🤔
 
-React-spring is a wrapper around a cooked down fork of [Facebooks animated](http://animatedjs.github.io/interactive-docs/). It is trying to cross it with Chenglou's [React-motion](https://github.com/chenglou/react-motion). Both have their pros and cons and could benefit from one another:
+React-spring is a cooked down fork of [Facebooks animated](http://animatedjs.github.io/interactive-docs/). It is trying to bridge it with Chenglou's [React-motion](https://github.com/chenglou/react-motion) because both have their pros and cons but could definitively benefit from one another:
 
 #### React-motion
 
@@ -25,14 +25,16 @@ As you see, they're polar opposites. React-spring inherits React-motions api, bu
 # Overview 🔭
 
 <p align="middle">
-  <img src="assets/spring.gif" width="280" />
-  <img src="assets/transition.gif" width="280" /> 
-  <img src="assets/reveal.gif" width="280" />
+  <img src="assets/spring.gif" width="430" />
+  <img src="assets/transition.gif" width="430" /> 
 </p>
 <p align="middle">
-  <img src="assets/trail.gif" width="280" />
-  <img src="assets/scroll.gif" width="280" /> 
-  <img src="assets/parallax.gif" width="280" /> 
+  <img src="assets/reveal.gif" width="430" />
+  <img src="assets/trail.gif" width="430" />
+</p>
+<p align="middle">
+  <img src="assets/scroll.gif" width="430" height="222.88" /> 
+  <img src="assets/parallax.gif" width="430" /> 
 </p>
 
 ```jsx
@@ -44,9 +46,7 @@ import { Spring, Transition, Trail, Parallax } from 'react-spring'
 A `Spring` will move data from one state to another. It remembers the current state, value changes are always fluid.
 
 ```jsx
-<Spring
-    from={{ opacity: 0 }}
-    to={{ opacity: 1 }}>
+<Spring from={{ opacity: 0 }} to={{ opacity: 1 }}>
     {styles => <div style={styles}>i will fade in</div>}
 </Spring>
 ```
@@ -57,11 +57,11 @@ A `Spring` will move data from one state to another. It remembers the current st
 
 ```jsx
 <Transition
-    keys={toggle ? 'ComponentA' : 'ComponentB'} 
-    from={{ opacity: 0 }} 
-    enter={{ opacity: 1 }} 
-    leave={{ opacity: 0 }}>
-    {toggle ? ComponentA : ComponentB}
+    keys={items.map(item => item.key)}
+    from={{ opacity: 0, height: 0 }}
+    enter={{ opacity: 1, height: 20 }}
+    leave={{ opacity: 0, height: 0 }}>
+    {items.map(item => styles => <li style={styles}>{item.text}</li>)}
 </Transition>
 ```
 
@@ -71,7 +71,7 @@ Given a single child instead of a list you can reveal components with it.
 
 ```jsx
 <Transition
-    keys={toggle ? 'ComponentA' : 'ComponentB'} 
+    keys={toggle ? 'A' : 'B'} 
     from={{ opacity: 0 }} 
     enter={{ opacity: 1 }} 
     leave={{ opacity: 0 }}>
@@ -84,10 +84,7 @@ Given a single child instead of a list you can reveal components with it.
 `Trail` animates the first child of a list of elements, the rest follow the spring of their previous sibling.
 
 ```jsx
-<Trail
-    from={{ opacity: 0 }}
-    to={{ opacity: 1 }}
-    keys={items.map(item => item.key)}>
+<Trail from={{ opacity: 0 }} to={{ opacity: 1 }} keys={items.map(item => item.key)}>
     {items.map(item => styles => <div style={styles}>{item.text}</div>)}
 </Trail>
 ```
@@ -103,11 +100,13 @@ Given a single child instead of a list you can reveal components with it.
 </Parallax>
 ```
 
-#### Additional demos: [TodoMVC](https://codesandbox.io/embed/2pk8l7n7kn) | [DragList](https://codesandbox.io/embed/l9zqz0m18z) | [Graphs](https://codesandbox.io/embed/j3x61vjz5v)
+#### Additional demos: [Vertical scroll](https://codesandbox.io/embed/0oonqxnpjl) | [Animated graphs](https://codesandbox.io/embed/j3x61vjz5v) | [Animated todoMVC](https://codesandbox.io/embed/2pk8l7n7kn) | [Drag n drop](https://codesandbox.io/embed/l9zqz0m18z)
 
-# API 📖
+# API overview 📖
 
-## Springs and default rendering
+For a raw documentation of all possible properties look [here](https://github.com/drcmda/react-spring/blob/master/API.md).
+
+### Springs and interpolation
 
 You can interpolate almost everything, from numbers, colors, svg-paths, percentages, arrays to string patterns:
 
@@ -121,6 +120,8 @@ You can interpolate almost everything, from numbers, colors, svg-paths, percenta
     path: toggle ? 'M20,380 L380,380 L380,380 Z' : 'M20,20 L20,380 L380,380 Z' }}>
 ```
 
+### Render props
+
 Don't like the way render props wrap your code?
 
 ```jsx
@@ -139,7 +140,7 @@ const App = ({ color, children }) => (
 
 Et voilà! `Header` animates on prop changes! Props that `Spring` doesn't recognize will be spread over the receiving component, including `children` if you use `render` to refer to the render-child.
 
-## Native rendering ([Demo](https://codesandbox.io/embed/882njxpz29))
+### Native rendering ([Demo](https://codesandbox.io/embed/882njxpz29))
 
 By default we'll render the receiving component every frame as it gives you more freedom to animate. In situations where that becomes expensive add the `native` flag and animations will now be applied directly to the dom. The flag is available for all primitives (Spring, Transition & Trail, Parallax is native by design).
 
@@ -161,9 +162,9 @@ import { Spring, animated, template } from 'react-spring'
 </Spring>
 ```
 
-## Transitions
+### Transitions
 
-Animates children as they mount and unmount. `from` denotes base styles, `enter` styles are applied when objects appear, `leave` styles are applied when objects disappear. Keys and children have to match in their order!
+Animates children as they mount and unmount. `from` denotes base styles, `enter` styles are applied when objects appear, `leave` styles are applied when objects disappear. Keys and children have to match in their order! The keys are the same that you would provide in any other looping situation.
 
 ```jsx
 import { Transition } from 'react-spring'
@@ -191,7 +192,7 @@ You can use this prototype for two-state reveals, simply render a single child t
 </Transition>
 ```
 
-## Trails/Staggered transitions
+### Trails/Staggered transitions
 
 `Trail` animates the first child of the list you pass, the others will follow in a trailing motion. The api is similar to `Transition` though it will assume your list is fixed.
 
@@ -203,9 +204,9 @@ import { Trail } from 'react-spring'
 </Trail>
 ```
 
-## Parallax and page transitions
+### 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 scrolling speeds.
+`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.
 
 `Parallax.pages` determines the total space of the inner content where each page takes 100% of the visible container. `Layer.offset` determines where the layer will be at when scrolled to (0=start, 1=1st page, ...). `Layer.speed` shifts the layer in accordance to its offset, values can be positive or negative.
 
@@ -214,7 +215,7 @@ import { Parallax } from 'react-spring'
 
 <Parallax pages={3} scrolling={false} horizontal ref={ref => this.parallax = ref}>
     <Parallax.Layer offset={0} speed={0.5}>
-        <span onClick={() => this.parallax.scrollTo(1)}>>
+        <span onClick={() => this.parallax.scrollTo(1)}>
             Layers can contain anything
         </span>
     </Parallax.Layer>