A declarative way to animate in framer-motion-3d, similar to react-spring/three.

[nhtoby311]

I wonder if there is a way to animate the value and then use it in R3F, like this example from their docs.

import { a, useSpring } from '@react-spring/three'

function Signal({ active }) {
  const { x } = useSpring({ x: active ? 100 : 0 })
  return <a.mesh position-x={x} />

Or something like useAnimate, but for R3F component

const [scope,animate] = useAnimate()
animate(scope.current,{x:[100,0]})

<mesh ref={scope}/>

[IAlphaOmegaI]

Kinda late but you can use useAnimationControls and pass the return of that as the animate prop.

import { useAnimationControls } from "framer-motion";
/// ...
const controls = useAnimationControls();

const handleClick = () => {
   controls.start("variant-name");
   // or
   controls.start({
     ...
   });
}

return <motion.group animate={controls} />