frame

frame is used to schedule a function to run on Motion's animation loop. Using Motion's animation loop:

• Prevents layout thrashing.

• Provides an easy keep-alive API for creating your own animation loop.

• Avoids the significant performance overhead of multiple requestAnimationFrame calls.

Usage

Import frame from Motion:

import { frame } from "motion"

Schedule a callback

frame works like requestAnimationFrame, whereby callbacks provided will execute on the next animation frame.

frame splits the animation frame into three steps:

• read: Read values from or measure the DOM.

• update: Amend values once all values have been read.

• render: Apply updated values to DOM once all values have been updated.

A function can be scheduled to run at each step like so:

frame.render(() => element.style.transform = "translateX(0px)")

Cancel a callback

cancelFrame can be used to cancel a callback.

import { frame, cancelFrame } from "framer-motion"

function measureElement() {
  console.log(element.getBoundingClientRect())
}

frame.read(measureElement)
cancelFrame(measureElement)

Animation loop

Often, you'll want to keep firing a function every frame. You can do so by passing true as the second argument.

let i = 0

function update() {
  i++

  // Stop after 100 frames
  if (i >= 100) cancelFrame(update)
}

frame.update(update, true)