loading code fetching the highlighted snippet
FIG-001/ ANIMATE
animating html content.
animate(from, to, options) drives any imperative value over time. onUpdate hands you the latest interpolated number — round it and write it into $state to render rich HTML on every frame.
-
animate(0, 100, { duration: 5 })returns controls that walk the value imperatively. Unlikemotion.*props which animate styles, this lets you drive any JS value — text, canvas, business logic. - The
onUpdatecallback fires every frame with the interpolated value. Rounding it before storing turns a continuous tween into an integer counter — the same trick works for currency, percentages, or any formatted text. -
controls.stop()in theonMountcleanup halts the animation if the component unmounts mid-tween. Important — without it the closure keeps writing into$stateafter the component is gone.
0
category · animate
sheet · sheet 01 / 01
⟳ to re-run