Animating arbitrary props without the a or animated wrapper

[maurocolella]

🤓 Question

I have a (crude) camera control component that looks like:

  useEffect(() => {
    pos ? camera.position.set(pos[0], pos[1], pos[2]) : camera.position.set(4,4,2);
    lookAt ? camera.lookAt(lookAt[0], lookAt[1], lookAt[2]) : camera.lookAt(0,4,0);
  }, [camera, pos, lookAt, objRef])

  return (
    <>
      <PointerLockControls
        ref={objRef}
        args={[camera, domElement]}
        maxPolarAngle={Math.PI/2 * 1.3}
        minPolarAngle={Math.PI/2 * 0.7}
      />
      {render(1)}
    </>
  );

Which I can't quite wrap using the animated or a convenience wrappers. I am trying to transition the pos and lookAt using useSpring, but I am stumped. How can I animate just those props without wrapping the component?

(You must search the issues before asking your question. Please consider asking in the Discussions tab and/or Stack Overflow first.)

[joshuaellis]

It depends how much control you want, but in this instance, i'd probably use the Controller class. See the documentation here: https://react-spring.io/classes/controller alternatively you might just be okay with a SpringValue.

Does this help you?

[maurocolella]

It's a start. Thank you.