Docs/Primitives/createAnimationFrame

createAnimationFrame

Runs a function on motion-solidjs's shared frame loop. Use it instead of a local requestAnimationFrame when the callback reads or writes values that motion also manages.

import { createAnimationFrame, createMotionValue } from 'motion-solidjs'

function Ticker() {
  const t = createMotionValue(0)
  createAnimationFrame((timestamp, delta) => {
    t.set(t.get() + delta)
  })
  return <span>{t.get().toFixed(0)}</span>
}

✦

elapsed: 0.00s

create-animation-frame.tsxOpen ↗

import { motion, createAnimationFrame, createMotionValue } from 'motion-solidjs'
import { createSignal } from 'solid-js'

export const meta = {
  slug: 'create-animation-frame',
  title: 'createAnimationFrame',
  category: 'animations',
  description: 'Run a callback every frame — drive a signal and a motion value from one rAF loop.',
  tag: 'createAnimationFrame',
} as const

export default function UseAnimationFrameExample() {
  const [elapsed, setElapsed] = createSignal(0)
  const rotate = createMotionValue(0)

  createAnimationFrame((t) => {
    setElapsed(t / 1000)
    rotate.set((t / 16) % 360)
  })

  return (
    <div class="flex flex-col items-center gap-3">
      <motion.div
        class="grid h-20 w-20 place-items-center rounded-2xl bg-grad-violet text-2xl shadow-glow"
        style={{ rotate }}
      >
        ✦
      </motion.div>
      <span class="rounded-full border border-border bg-card px-3 py-1 text-[10px] font-mono text-fg-dim">
        elapsed: {elapsed().toFixed(2)}s
      </span>
    </div>
  )
}

The callback receives (timestamp, delta). Return early when you want to skip a frame.