Animation Controller

The animation controller is the heart of the system. It manages the animation loop using requestAnimationFrame and provides precise timing information to your animations.

const controller = createAnimationController({
  autoplay: true // or 'on-mount' or false
})
// Basic control methods
controller.start()
controller.pause()
controller.stop()

The createAnimation primitive also returns an AnimationController that can be used to control the animation loop.

const controller = createAnimation(({ currentTime }) => {
    console.log(currentTime)
})

<button onClick={controller().start}>Start</button>
<button onClick={controller().pause}>Pause</button>
<button onClick={controller().stop}>Stop</button>

Say you want to have two animations running at the same time. You can pass a controller as the second argument of the createAnimation primitive, it will use that instead of creating a new controller.

const controller = createAnimationController()

createAnimation(({ currentTime }) => {
    console.log("FIRST ANIMATION", currentTime)
}, () => controller)
createAnimation(({ currentTime }) => {
    console.log("SECOND ANIMATION: ", currentTime)
}, () => controller)
createAnimation(({ currentTime }) => {
    console.log("THIRD ANIMATION: ", currentTime)
}, () => controller)

// These controls will affect all three animations
controller.start()
controller.pause()
controller.stop()

Each controller provides:

currentTime since animation start
deltaTime between frames
Running state management
Automatic cleanup on component unmount