loading code fetching the highlighted snippet
FIG-001/ HOOK
imperative useAnimate.
useAnimate returns [scope, animate]. Attach the scope to a subtree, then call animate(selector, props, options) — sequences, staggers, and selector-driven targets without any motion.* components.
- Attach the scope to any node with
{@attach scope}. Now selectors inanimate('li', …)resolve only within that subtree — the same selector elsewhere on the page is ignored. Auto cleanup on destroy. - Pass
animatean array of[selector, props, options]tuples to sequence them. Each step starts when the previous finishes unless you override withat: '-0.2'(start 200ms before previous ends) orat: 0(parallel). -
stagger(0.08)in the delay slot fans the animation across matched elements — firstlistarts at 0, next at 80ms, and so on. Same hook handles target-specific beats like the button's pop.
- Stagger
- Sequence
- Compose
- Done
category · hook
sheet · sheet 01 / 01
⟳ to re-run