Motion

Motion drives a number — or the keys of an object — from one value to another using a spring, damping curve or inertial fling. It runs on a single shared frame loop and emits a change event on every tick, so the adapter just forwards that value to your view.

Click the track to spring the box across.

Usage

In React, useAnimate keeps the value off the render path entirely — it hands you a ref and writes to the DOM node directly on each frame:

import { useAnimate } from '@60fps/ui-react/motion';

function Box() {
	const [ref, motion] = useAnimate<HTMLDivElement>(0, (x, el) => {
		el.style.transform = `translateX(${x}px)`;
	});

	return <div ref={ref} onClick={() => motion.set(240, { easing: 'spring' })} />;
}

Prefer reactive state instead? useMotion returns a stateful value you can render directly:

import { useMotion } from '@60fps/ui-react/motion';

const [x, motion] = useMotion(0);
// x updates on every frame; motion.set(…) to animate

In Vue, useMotion returns a [ref, motion] tuple — or binds an object key in place:

<script setup lang="ts">
import { useMotion } from '@60fps/ui-vue/motion';

const [x, motion] = useMotion(0);
const onClick = () => motion.set(240, { easing: 'spring' });
</script>

<template>
	<div @click="onClick" :style="{ translate: `${x}px` }" />
</template>

API

motion.set(value, options?)

Animates toward value, returning a promise that resolves when the motion settles.

Other members