animate

animate is a simple function that can animate a single value, or a MotionValue. This is for very advanced use, and it's generally prefered to animate via the motion component.

#Animate a single value

By passing a to and from value, animate will output latest values to the provided onUpdate callback.

// Numbers
animate(0, 100, {
  onUpdate: latest => console.log(latest)
})

// Colors etc
animate("#fff", "#000", {
  duration: 2
  onUpdate: latest => console.log(latest)
})

#Animate a MotionValue

By passing animate a MotionValue instead, it'll be automatically updated with the latest values.

const x = useMotionValue(0)

useEffect(() => {
  animate(x, 200)
}, [])

#Options

animate accepts the usual transition options. Additionally, it accepts onUpdate and onComplete that fire when the animation updates and finished respectively.

#Returns

animate returns an object of controls, currently with a single stop method.

#stop(): void

function Component({ isVisible }) {
  const opacity = useMotionValue(0)
  
  useEffect(() => {
    const controls = animate(opacity, isVisible ? 1 : 0)
    return controls.stop
  }, [isVisible])
}