v0.4.0-examples.md

@@ -4,14 +4,12 @@
 <Motion
   defaultStyle={{
     // you might/might not have used `left: spring(0)`. That's no longer supported.
-    left: spring(0),
-    border: '1px solid',
+    left: 0,
   }}
   style={{
-    left: spring(10, [120, 17]),
-    border: '1px solid',
+    left: spring(10, {stiffness: 120, damping: 17}),
   }}>
-  {style => <div style={style} />}
+  {style => <div style={{left: style.left, border: '1px solid'}} />}
 </Motion>
 ```
 
@@ -20,7 +18,7 @@
 ```jsx
 <StaggeredMotion
   defaultStyles={[
-    {x: 0}, // same comment as `Motion`'s `defaultStyle` above.
+    {x: 0},
     {x: 10},
   ]}
   styles={this.getEndValue}>
@@ -40,20 +38,20 @@
 <TransitionMotion
   willEnter={() => ({x: 0})} // triggered by key3
   willLeave={() => ({x: spring(100)})} // triggered by key2
-  defaultStyles={{
-    key1: {x: 0},
-    key2: {x: 0},
-  }}
-  styles={{
-    key1: {x: spring(10)},
-    key3: {x: spring(10)},
-  }}>
+  defaultStyles={[
+    {key: 'key1', style: {x: 0}},
+    {key: 'key2', style: {x: 0}},
+  ]}
+  styles={[
+    {key: 'key1', style: {x: spring(10)}},
+    {key: 'key3', style: {x: spring(10)}},
+  ]}>
   {values =>
     <div>
-      {Object.keys(values).map((key) =>
+      {values.map(({key, style}) =>
         <div
           key={key}
-          style={{left: values[key].x}} />
+          style={{left: style.x}} />
       )}
     </div>
   }