React-spring: Difficulty understanding the duration of physics-based animations

[jmar777]

I've spent some time reading the documentation and watching the announcement video, but I feel like I'm still missing something quite fundamental about how this library works.

Starting with a basic example from the documentation:

import {useSpring, animated} from 'react-spring'

function App() {
  const props = useSpring({opacity: 1, from: {opacity: 0}})
  return <animated.div style={props}>I will fade in</animated.div>
}

As advertised, no durations are present in the API. The part I'm struggling to understand is how and why the values are manipulated at a given rate, as opposed to any other arbitrary rate. The lack of a duration config is attributed in various places to the fact that it's "based on physics, not time + curve". I don't doubt that this is a helpful explanation for someone who understands the part that I'm not understanding, but for a newcomer like me I'm still left wondering why the animation lasted roughly a second or so, and not, say, 100 milliseconds or 3 hours or any other "duration".

Perhaps this is already documented somewhere that I missed, but could someone maybe explain how to get from "it's based on physics, you don't need a duration" to the point where it makes sense why the animation completes in the time that it does?

Thanks in advance for any help!

[scottalan]

@jmar777

Using the Render-props Api you can add configuration to handle the duration and delay.

<Spring
      from={{ opacity: 0 }}
      to={{ opacity: 1 }}
      config={{ duration: 500, delay: 4000 }}
    >
      {(props) => (
        <div
          id="my-div"
          className="bg-white"
          style={props}
        >
          I will fade in
        </div>
      )}
</Spring>

When using the Hooks Api you can add configuration as well.

const props = useSpring({
    opacity: 1,
    from: { opacity: 0 } ,
    config: {
      delay: 4000,
      duration: 500,
    },
  });
  return <animated.div
    className={`bg-white`}
    style={props}
  >
    I will fade in
  </animated.div>

Hope that helps!

[scottalan]

I've been playing around with the hook and it seems as though it doesn't respect delay. Based on what I'm seeing in renderprops-universal.d.ts it should, right?

This is an amazing library but I agree with you. As a newcomer myself, it would be nice if the examples were a little more verbose.

If I find a solid answer I'll post back 😉

[scottalan]

Found this post, maybe it will provide some insight. I haven't tested it myself...

[drcmda]

As advertised, no durations are present in the API. The part I'm struggling to understand is how and why the values are manipulated at a given rate, as opposed to any other arbitrary rate. The lack of a duration config is attributed in various places to the fact that it's "based on physics, not time + curve". I don't doubt that this is a helpful explanation for someone who understands the part that I'm not understanding, but for a newcomer like me I'm still left wondering why the animation lasted roughly a second or so, and not, say, 100 milliseconds or 3 hours or any other "duration".

@jmar777 @scottalan

I'll take some time with this one, bear with me. Springs are driven by force and resistance, not time.

In front of you is a table, there's a glas on it, slide it to the other end, how long will it take to get there? You see already, that question doesn't make sense without taking the environment into context, it just depends: how long is the table, how much force do you exert, how heavy is the glas, is the tables surface smooth or will it give friction, etc.

The point is, forget everything you thought you know about animation. Let these springs be, they work in accordance with the natural laws in their environment and everything in it moves in harmony and looks proper. If you feel something should be lighter or heavier, or bounce, that's something else. You either give it a preset in that case or define your own. But in no case will you ever have to think about it much. Just like when you slide the glas, you just do.

Now you will also appreciate how odd it is that we think of animation in terms of time. You have a sidebar transition: all 1s easeOut. You click it and it slides open. If you abort it half way through, it will stop dead in its tracks and naively move back using a curve that won't fit, taking a full second for only half the path it has to travel. It's such an odd way to go about it. 😐 And that's mainly the reason why IOS looks so good, because everything is driven by springs.

If that interests you more, check out: https://twitter.com/ReactPodcast/status/1154368199431004160

If you need a visual example: https://codesandbox.io/s/serene-dirac-guyyz These are just 3 springs with a different mass. These animations are interruptible and adaptive. It would not be possible to get even close this type of fidelity with durations and curves.

[nikparo]

I'm still left wondering why the animation lasted roughly a second or so, and not, say, 100 milliseconds or 3 hours or any other "duration".

React Spring uses the config.default ({ mass: 1, tension: 170, friction: 26 }) preset by default. As far as I can tell those values are somewhat arbitrary, but you can tweak them as you want to make your animation feel more responsive, softer, heavier, harsher, etc.

[aleclarson]

You can use this: https://chenglou.github.io/react-motion/demos/demo5-spring-parameters-chooser/

The "stiffness" is tension in react-spring. The "damping" is friction.

Eventually, we'll have a copy of that in the docs. (cc @dbismut)

[aleclarson]

Another tool for exploring the different spring parameters: https://springs.pomb.us/