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

Author: drcmda

readme.md

@@ -226,7 +226,6 @@ const Header = ({ children, bold, ...styles }) => (
     </h1>
 )
 
-
 <Spring render={Header} to={{ color: 'fuchsia' }} bold>
     hello there
 </Spring>
@@ -236,10 +235,9 @@ Et voilà! `Header` animates on prop changes! Props that `Spring` doesn't recogn
 
 ### Native rendering and interpolation ([Demo](https://codesandbox.io/embed/882njxpz29))
 
-| Other animation libs               | React-spring |
-| -------------- | ----------- |
-| ![](assets/without-native.jpeg)   | ![](assets/with-native.jpeg)          |
-| <sub>Most libraries render animations by having React recalculate the component-tree 60 times per second. Here it attempts to do that to a component consisting of ~300 sub-components, plowing through the browsers frame budget and causing jank.</sub> | <sub>React-spring with the `native` property set to `true` renders the component *only once*, from then on the animation will be applied directly to the dom in a requestAnimationFrame-loop, similar to how gsap and d3 do it.</sub> |
+![img](assets/without-native.jpeg) | ![img](assets/with-native.jpeg)
+---|---
+<sub>Most libraries animate by having React recalculate the component-tree. Here it attempts to animate a component consisting of ~300 sub-components, plowing through the frame budget and causing jank.</sub> | <sub>React-spring with the `native` property renders the component *only once*, from then on the animation will be applied directly to the dom in a requestAnimationFrame-loop, similar to how gsap and d3 do it.</sub>
 
 By default we'll render every frame (like in the image on the left) as it gives you more freedom (for instance this is the only way that you can animate React-component props). In situations where that becomes expensive use the `native` flag. The flag is available for all primitives (Spring, Transition & Trail, Keyframes, Parallax is native by design). **Try doing this in all situations where you can**, the benefits are worth it. Especially if your animated component consists of large subtrees, routes, etc.
 
@@ -253,18 +251,22 @@ Just be aware of the following conditions:
 ```jsx
 import { Spring, animated, interpolate } from 'react-spring'
 
-<animated.div 
-    style={{
-        // Use plain animated values like always, ...
-        borderRadius: radius,
-        // For interpolations, either call "interpolate" on the value itself, it accepts a function
-        background: time.interpolate(t => 'rgba(0, 0, 0, ${t})'),
-        // ... or supply a range clamp
-        color: time.interpolate({ range: [0, 1], output: ['red', 'rgba(1, 50, 210, 0.5)'] }),
-        // Or use the interpolate helper, which can take multiple values, it accepts a function
-        transform: interpolate([x, y], (x, y) => `translate(${x}px, ${y}px)`),
-    }}>
-</animated.div>
+<Spring native from={{ radius: 0, time: 0, x: 0, y: 0 }} to={{ radius: 10, time: 1, x: 10, y: 20 }}>
+    {({ radius, time, x, y }) => (
+        <animated.div 
+            style={{
+                // Use plain animated values like always, ...
+                borderRadius: radius,
+                // For interpolations, call "interpolate" on the value itself, it accepts a function
+                background: time.interpolate(t => 'rgba(0, 0, 0, ${t})'),
+                // ... or supply a range clamp
+                color: time.interpolate({ range: [0, 1], output: ['red', 'rgba(1, 50, 210, 0.5)'] }),
+                // Or use generic interpolate, which takes multiple values, it accepts a function
+                transform: interpolate([x, y], (x, y) => `translate(${x}px, ${y}px)`),
+            }}>
+        </animated.div>
+    )}
+</Spring>
 ```
 
 ### Transitions