spring examples

gistfile1.txt

shows how easy routing is: https://codesandbox.io/s/wouter-animated-transitions-w-reactspring-ikjpx
animated grid: https://codesandbox.io/s/26mjowzpr
non-animated grid: https://codesandbox.io/s/6z5q5wj27w
tarot cards: https://codesandbox.io/s/j0y0vpz59
simplified tarot cards: https://codesandbox.io/s/3v45w26395
chaining hooks: https://codesandbox.io/s/2v716k56pr
spring work corss platform, for instance 3d, transitions *meshes*: https://codesandbox.io/s/ly0oxkp899

Easings are not an ideal model for fluid animation. Slide something out `left: 1s ease-in`, halfway through you abort. The thing will stop dead in its tracks and move back 1s with an ease-in curve. Nothing in the real world behaves like that! A real object moves according to laws, the force it took initially, surface friction, if you yank it back it will expend energy first, then move towards you slowly accelerating. 

That's why IOS looks so polished, surfaces behave like real objects. Almost nothing in the user interface uses curve and durations, it's spring-based. The people that made it even went as far as stating that curves are "fundamentally opposed to fluid animation". That's springs philosophy, it creates a physics based environment, everything that moves in there behaves proper, you don't need to think about the animation or config props, you just let it go. 

As for the api, hooks are in between the imperative and declarative. Imperative animation (gsap, tweenmax) is powerful, but conflicts with the component paradigm. Declarative animation (f.i. react-motion) is perfect for reactive UI but has little flexibility. With hooks you can declare your animations, but alter them any time still. In this model your view stays *mostly* the same, you are merely transforming static values into animatable props, which makes applying animation easier because you don't need to build your view around the requirements of a lib.

As an example, you have a component that can show and hide

    function Header({ visible, children }) {
      return <h1 style={{ opacity: visible ? 1 : 0 }}>{children}</h1>

In order to bring motion into this you merely transform that value

    function Header({ visible, children }) {
      const props = useSpring({ opacity: visible ? 1 : 0 })
      return <a.h1 style={props}>{children}</a.h1>

The `<a.` part looks weird at first, though if you have used react-native before you know it, they use the same approach. It allows react-spring to animate that element outside of React, which is very fast. You don't want to re-render the component 60 times a second just to get an animation.

So could you do this with css, sure you can. Would even be easier in this case, though it will never look as good. But now try these in css and you'll quickly exhaust it:

card stack: https://codesandbox.io/embed/j0y0vpz59
another one: https://codesandbox.io/embed/732j6q4620
a grid: https://codesandbox.io/embed/26mjowzpr