nowfound

Dev tools · March 13, 2018

TS

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…

Alternatives

What it does

In the maker’s words, at launch

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

Does the same job

all alternatives →

More dev tools this month

the category →
  • Dograh▲592

    The open source VAPI alternative

    Dev tools · 25d ago · dograh.com

  • Meridian▲530

    Don't let your work go unnoticed. Get promoted!

    Dev tools · 20d ago · meridiona.com

  • x1▲516

    Lovable for iPhone apps go from idea to App Store

    Dev tools · 11d ago · x1.new

  • The GTM Co-Founder▲402

    Open-source GTM skills for technical founders

    Dev tools · 29d ago · gtmcofounder.com

  • Open-Source eInk Bike Computer▲389

    OpenTrailPaper is open-source bike computer firmware for the LilyGO T5S3 4.7" E-Paper PRO. It supports offline maps, GPX routes, FIT recording and Bluetooth sensors.

    Dev tools · 1d ago · opentrailpaper.com

  • Nuphos▲380

    The AI-Native DevOps Workspace.

    Dev tools · 24d ago · nuphos.ai

Launched alongside, March 2018

the whole month →