What does "{ x } = useSpring" and "x.to" do in examples?

[Levelleor]

There's a click toggle example in the docs but I couldn't find any documentation for the method anywhere. It looks like x is a custom parameter that is set a number value and then method .to() multiplies the outputs with that value. The only issue is that when it is multiplied by 0 for some reason the animation resets to base value instead of multiplying values by 0 and actually scaling the element to 0.

I am just wondering to how it works. I don't understand the concept of the thing and its purpose.

The code I found looks like so:

  const [state, toggle] = useState(true)
  const { x } = useSpring({
    loop: true,
    from: { x: 0 },
    x: state ? 1 : 0,
    config: { duration: 300 },
  });
  // then later x is used with method "to" in the render like so:
  // x.to({ output: [1, 2, 1] });

[joshuaellis]

Hey @Levelleor, have you taken a look at our beta docs? There's a more comprehensive getting started page & then some conceptual documentation that might answer your questions – https://beta.react-spring.dev/docs/getting-started

If you have anymore after reading that, feel free to ask them here :)