Animation Callback

The primitive createAnimation asks you to pass an AnimationCallback as an argument. This primitive will start a RAF loop and run the callback you passed onto it on every frame. A manual first approach to this API could be to set your own signals inside the loop.

import { createSignal } from 'solid-js'
import { createAnimation } from 'ararajs'

const [x, setX] = createSignal(0)

createAnimation(({ deltaTime }) => {
  setX(prev => prev + 100 * deltaTime)
})

function MovingBox() {
  return (
    <div style={{
      translte: `translateX(${x()}px)`,
      width: '50px',
      height: '50px',
      background: 'blue'
    }}/>
  )
}

That is close to how other primitives are made:

import { createSignal } from 'solid-js'
import { createAnimation } from 'ararajs'

function createLinearMovement(velocity?: () => number) {
  const [pos, setPos] = createSignal(0)
  createAnimation(({ deltaTime }) => {
      setPos(prev => prev + (velocity?.() ?? 100) * deltaTime)
  })
  return pos
}

function MovingBox() {
  const x = createLinearMovement()

  return (
    <div style={{
      translte: `translateX(${x()}px)`,
      width: '50px',
      height: '50px',
      background: 'blue'
    }}/>
  )
}

Here’s the AnimationCallback reference API:

export type AnimationCallback = (world: {
  currentTime: number
  deltaTime: number
}) => void