# HTML Content
> Animate HTML content with smooth enter and exit transitions using Svelte Motion. Demonstrates AnimatePresence with dynamic HTML elements.
**Source:** [https://motion.svelte.page/examples/html-content](https://motion.svelte.page/examples/html-content)
**Markdown mirror:** [https://motion.svelte.page/examples/html-content.md](https://motion.svelte.page/examples/html-content.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: 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.
**Metadata:** tag: `ANIMATE` | pattern: `animate() → state`
### Notes
- `animate(0, 100, { duration: 5 })` returns controls that walk the value imperatively. Unlike `motion.*` props which animate styles, this lets you drive any JS value — text, canvas, business logic.
- The `onUpdate` callback 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 the `onMount` cleanup halts the animation if the component unmounts mid-tween. Important — without it the closure keeps writing into `$state` after the component is gone.
### Source
#### Default.svelte
Source file: [src/lib/examples/html-content/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/html-content/demos/Default.svelte)
```svelte
// html content{String(count).padStart(3, '0')} / 100