HelixOverviewDocsComponentsSandboxTheme builderMapsBuildingGraphBuildingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Motion ToggleView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA button that pauses every motion on the page that starts by itself, and lets it run again.ExperimentalSince 0.199.0ActionsUsageimport'@fusion.dev/helix/motion-toggle'import'@fusion.dev/helix-headless/motion-toggle'Preview
API ReferenceRoothelix-motion-toggleA button that pauses every motion on the page that starts by itself, and lets it run again.
PropTypeDefaultDescriptionlabelstring"Pause motion"The button's name, which stays the same whichever way it stands.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The button's text, where it shows more than its icon. Defaults to nothing, the icon alone, named by label.iconReplaces the icon, which is pause while motion runs and play while it is paused.
EventTypeDescriptionchangeEventFired after a press pauses the page's motion or lets it run.
PartDescriptionbuttonThe toggle button, with aria-pressed while the page's motion is paused.iconThe icon inside the button.
CSS PropertyDescription--motion-toggle-background-colorThe button's fill. Defaults to the floating overlay surface.
Custom stateDescriptionpausedThe page's motion is paused.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-motion-toggleA button that pauses every motion on the page that starts by itself, and lets it run again.
PropTypeDefaultDescriptionlabelstring"Pause motion"The button's name, which stays the same whichever way it stands.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The button's text, where it shows more than its icon. Defaults to nothing, the icon alone, named by label.iconReplaces the icon, which is pause while motion runs and play while it is paused.
EventTypeDescriptionchangeEventFired after a press pauses the page's motion or lets it run.
PartDescriptionbuttonThe toggle button, with aria-pressed while the page's motion is paused.iconThe icon inside the button.
Custom stateDescriptionpausedThe page's motion is paused.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
ExamplesNameDescriptionPreviewThe page's pause, as an icon alone and with words beside it. A press pauses every motion on the page that starts by itself.PreviewThe page's pause, as an icon alone and with words beside it. A press pauses every motion on the page that starts by itself.