Utilities

#AnimationControls

Returned from useAnimation for manual starting/stopping of animations.

import { motion, useAnimation} from "framer-motion"

export default function() {
  const controls = useAnimation()
  
  return <motion.div animate={controls} >
}

#set(definition): void

Instantly set to a set of properties or a variant.

// With properties
controls.set({ opacity: 0 })

// With variants
controls.set("hidden")

#start(definition, transitionOverride): Promise<any>

Starts an animation on all linked components.

controls.start("variantLabel")
controls.start({
  x: 0,
  transition: { duration: 1 }
})

#stop(): void

Stops animations on all linked components.

#useCycle

#useCycle(items): CycleState<T>

Cycles through a series of visual properties. Can be used to toggle between or cycle through animations. It works similar to useState in React. It is provided an initial array of possible states, and returns an array of two arguments.

An index value can be passed to the returned cycle function to cycle to a specific index.

import * as React from "react"
import { motion, useCycle } from "framer-motion"

export const MyComponent = () => {
  const [x, cycleX] = useCycle(0, 50, 100)

  return (
    <motion.div
      animate={{ x: x }}
      onTap={() => cycleX()}
     />
   )
}

#useReducedMotion

#useReducedMotion(): boolean | null

A hook that returns true if we should be using reduced motion based on the current device's Reduced Motion setting.

This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing x/y animations with opacity, disabling the autoplay of background videos, or turning off parallax motion.

It will actively respond to changes and re-render your components with the latest setting.

export function Sidebar({ isOpen }) {
  const shouldReduceMotion = useReducedMotion()
  const closedX = shouldReduceMotion ? 0 : "-100%"

  return (
    <motion.div animate={{
      opacity: isOpen ? 1 : 0,
      x: isOpen ? 0 : closedX
    }} />
  )
}

#useDragControls

#useDragControls(): DragControls

Usually, dragging is initiated by pressing down on a motion component with a drag prop and moving it. For some use-cases, for instance clicking at an arbitrary point on a video scrubber, we might want to initiate that dragging from a different component than the draggable one.

By creating a dragControls using the useDragControls hook, we can pass this into the draggable component's dragControls prop. It exposes a start method that can start dragging from pointer events on other components.

const dragControls = useDragControls()

function startDrag(event) {
  dragControls.start(event, { snapToCursor: true })
}

return (
  <>
    <div onPointerDown={startDrag} />
    <motion.div drag="x" dragControls={dragControls} />
  </>
)

#useAnimationFrame

#useAnimationFrame(callback):

Runs a callback once every animation frame. The callback is provided a timestamp, in milliseconds, that is the duration of time since the callback was first called.

import { useAnimationFrame } from "framer-motion"

function Component() {
  const ref = useRef(null)
  useAnimationFrame(t => {
    ref.current.style.transform = `rotateY(${t}deg)`
  })

  return <div ref={ref} />
}