Use react-spring to animate group instead of lerp

[kaeltran16]

Hi, I tried to convert the following snippet to react spring but it does not seem to work. My initial thought was group is animated differently from mesh. For some reason, the y value doesn't seem to change.

The original snippet:

useFrame(() => {
    const curY = ref.current.position.y
    const curTop = state.top.current
    ref.current.position.y = lerp(curY, (curTop / state.zoom) * factor, 0.1)
  })
  return (
    <offsetContext.Provider value={offset}>
      <group {...props} position={[0, -sectionHeight * offset * factor, 0]}>
        <group ref={ref}>{children}</group>
      </group>
    </offsetContext.Provider>
  )

My conversion:

const curTop = state.top.current
  const { y } = useSpring({ y: (curTop / state.zoom) * factor })

  const position = new Vector3().setY(y.value)

  return (
    <offsetContext.Provider value={offset}>
      <group {...props} position={[0, -sectionHeight * offset * factor, 0]}>
        <animated.group position={position}>{children}</animated.group>
      </group>
    </offsetContext.Provider>
)

[gsimone]

try like this:

<animated.group position={y.interpolate(r => ([0, y, 0])}

check this out

https://codesandbox.io/s/r3f-basic-demo-q21f7?file=/src/index.js

[drcmda]

this 👆

these are all valid:

const { x } = useSpring({ x: 0, from: { x: 1 } })
return <a.mesh position-x={x} />

const { x } = useSpring({ x: 0, from: { x: 1 } })
return <a.mesh position={x.to(x => [x, 0, 0])} />

const { x } = useSpring({ x: [0, 0, 0], from: { x: [1, 0, 0] } })
return <a.mesh position={x} />

[kaeltran16]

thank guys, it workes!