v0.3.0-examples.md

@@ -1,42 +1,42 @@
 #### Normal Spring
 ```jsx
-<Spring
-  defaultValue={{x: {val: 0, config: [120, 17]}}}
-  endValue={{x: {val: 10, config: [120, 17]}}}>
-  {style => <div style={{left: style.x.val}} />}
-</Spring>
+<Motion
+  defaultStyle={{x: 0}}
+  style={{x: spring(10, [120, 17])}}>
+  {style => <div style={{left: style.x}} />}
+</Motion>
 ```
 
 #### Stagger Springs
 ```jsx
-<Spring
-  defaultValue={[
-    {x: {val: 0, config: [120, 17]}},
-    {x: {val: 10, config: [120, 17]}}
+<StaggeredMotion
+  defaultStyles={[
+    {x: 0},
+    {x: 10}
   ]}
-  endValue={this.getEndValue}>
+  styles={this.getEndValue}>
   {values =>
     <div>
       {values.map((value, i) =>
-        <div key={i} style={{left: value.x.val}} />
+        <div key={i} style={{left: value.x}} />
       )}
     </div>
   }
-</Spring>
+</StaggeredMotion>
 ```
 
 #### TransitionSpring
 ```jsx
-<TransitionSpring
-  willLeave={() => ({x: {val: 100}})}
-  defaultValue={{key1: {x: {val: 0}}, key2: {x: {val: 0}}}}
-  endValue={{key1: {x: {val: 10}}}}>
+<TransitionMotion
+  willLeave={() => ({x: spring(100)})}
+  defaultStyles={{key1: {x: 0}, key2: {x: 0}}}
+  styles={{key1: {x: spring(10)}}}>
   {values =>
     <div>
       {Object.keys(values).map(key =>
-        <div key={key} style={{left: values[key].x.val}} />
+        <div key={key} style={{left: values[key].x}} />
       )}
     </div>
   }
-</TransitionSpring>
-```
+</TransitionMotion>
+```