[FEATURE] onUpdate return a new computed state

[samdenty]

Is your feature request related to a problem? Please describe.

Ability to return a new animation state for each frame, inside onUpdate.

Describe the solution you'd like

const Component = props => (
  <motion.div
    {...props}
    onUpdate={state => ({ opacity: computeOpacity(state.rotateX), ...state })}
  />
)

const Test = () => (
  <Component initial={{ rotateX: 0 }} animate={{ rotateX: 90 }} />
)

Describe alternatives you've considered

Passing motionValues to a component via props instead. But using motionValues means you miss out on using variants, whileHover etc.

const Component = ({ rotateX }) => {
  const opacity = useTransform(rotateX, computeOpacity)

  return <motion.div style={{ opacity, rotateX }} />
}

const Test = () => {
  const rotateX = useSpring(0)
  useEffect(() => {
    setTimeout(() => rotateX.set(90), 50)
  }, [])
  
  return <Component rotateX={rotateX} />
}

[mattgperry]

Hi @samdenty. Have you got an example of a specific use-case of something you're currently unable to achieve because of MotionValues? Even though you define a prop using a MotionValue you are still able to use variants, whileHover etc to animate them. The MotionValue is just there to create relationships.

const Component = ({ animate, rotateX }) => {
  const rotateX = useMotionValue(0)
  const opacity = useTransform(rotateX, computeOpacity)

  return <motion.div animate={{ rotateX: 90 }} style={{ opacity, rotateX }} />
}