Skip to content

Commit fd6e4b1

Browse files
authored
Update readme.md
1 parent 9abb506 commit fd6e4b1

File tree

1 file changed

+3
-4
lines changed

1 file changed

+3
-4
lines changed

readme.md

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -236,10 +236,9 @@ Et voilà! `Header` animates on prop changes! Props that `Spring` doesn't recogn
236236

237237
### Native rendering and interpolation ([Demo](https://codesandbox.io/embed/882njxpz29))
238238

239-
| Other animation libs | React-spring |
240-
| -------------- | ----------- |
241-
| ![](assets/without-native.jpeg)   | ![](assets/with-native.jpeg) |
242-
| <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> |
239+
![img](assets/without-native.jpeg) | ![img](assets/with-native.jpeg)
240+
---|---
241+
<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>
243242

244243
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.
245244

0 commit comments

Comments
 (0)