Hacker News new | comments | show | ask | jobs | submit login
Show HN: The state of animation in React, introducing react-spring
5 points by mlsarecmg 9 months ago | hide | past | web | favorite
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

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

Native rendering: https://codesandbox.io/embed/882njxpz29

Reveals: https://codesandbox.io/embed/yj52v5689

List transitions: https://codesandbox.io/embed/j150ykxrv

Staggered lists: https://codesandbox.io/embed/vvmv6x01l5

Animated TodoMVC: https://codesandbox.io/embed/2pk8l7n7kn

Draggable list: https://codesandbox.io/embed/l9zqz0m18z

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact