Negative Spring?

[CodingButter]

Is there a simple method for using the negative value of a spring such as rotating a container with rotateZ and rotating its children by the negative version as to keep them facing correctly?

[CodingButter]

I achieved it pretty simply after a lot of playing around.

const spread = 90
const [springs, api] = useSprings(items.length, (index) => ({
  opacity: 0,
  x: 0,
  y: 0,
  rotateZ: 0,
  negZ: new SpringValue(0),
}))

....

 api.start((index) => ({
  config: { mass: 5, tension: 2000, friction: 200 },
  opacity: open ? 1 : 0,
  x: open ? 30 : 0,
  y: open ? 30 : 0,
  rotateZ: open ? (spread / items.length) * index : 0,
  negZ: open ? -1 * (spread / items.length) * index : 0,
}))

....

{springs.map(({ negZ, rotateZ, ...style }, index) => (
  <a.div key={index} className="absolute top-0 left-0" style={{ rotateZ }}>
    <a.div className={`absolute`} style={{ rotateZ: negZ, ...style }}>
      {items[index]}
    </a.div>
  </a.div>
))}

is there a more in depth version of the documentation. I feel like there so much I cant find

[joshuaellis]

If we take your example here:

const [springs, api] = useSprings(items.length, (index) => ({
  opacity: 0,
  x: 0,
  y: 0,
  rotateZ: 0,
}))

you can interpolate a particular value of springs:

return springs.map(({rotateZ}) => <animated.div style={{ rotateZ, rotateY: rotateZ.to(val => val * -1) />)

in regards to documentation, there is a beta docs currently in works – beta.react-spring.dev