4 ms·
Show HN: The state of animation in React, introducing react-spring
Most you you will probably be familiar with react-motion and Facebooks animated (react-natives default). Both are practically go-to solutions in their respective fields, but do leave a lot to be desired.
Animated interpolates everything and is fast, but misses essential primitives and can be troublesome to use due to its imperative nature. React-motion is declarative but can't interpolate and performs slower. After switching between the two for about a year i've decided to pick up where the two have left off:
So this is react-spring: https://github.com/drcmda/react-spring https://github.com/drcmda/react-spring
Similar api like react-motion, a little simpler even, all interpolations that animated can take in (you can animate numbers, colors, morph svg paths, gradients, percentages, degrees, etc.), and last but not least, native animations (it doesn't have to re-render the component frame by frame, it can send updates straight to the dom).
At this point i'm looking for suggestions and would be glad if anyone could test it. It's based on a cooked down fork of animated, so the foundation should be rock stable.
Some demos:
Interpolation: https://codesandbox.io/embed/oln44nx8xq https://codesandbox.io/embed/oln44nx8xq
Native rendering: https://codesandbox.io/embed/882njxpz29 https://codesandbox.io/embed/882njxpz29
Reveals: https://codesandbox.io/embed/yj52v5689 https://codesandbox.io/embed/yj52v5689
List transitions: https://codesandbox.io/embed/j150ykxrv https://codesandbox.io/embed/j150ykxrv
Staggered lists: https://codesandbox.io/embed/vvmv6x01l5 https://codesandbox.io/embed/vvmv6x01l5
Animated TodoMVC: https://codesandbox.io/embed/2pk8l7n7kn https://codesandbox.io/embed/2pk8l7n7kn
Draggable list: https://codesandbox.io/embed/l9zqz0m18z https://codesandbox.io/embed/l9zqz0m18z