Motion Duration and easing tokens TokenValue--helix-duration-instant0ms--helix-duration-fast120ms--helix-duration-normal200ms--helix-duration-slow320ms TokenValue--helix-easing-standardcubic-bezier(0.2, 0, 0, 1)--helix-easing-emphasizedcubic-bezier(0.3, 0, 0, 1.2)--helix-easing-deceleratecubic-bezier(0, 0, 0, 1)--helix-easing-acceleratecubic-bezier(0.3, 0, 1, 1)--helix-easing-springlinear(0, 0.006, 0.025, 0.101, 0.539, 0.826, 0.976, 1.037, 1.043, 1.026, 1.006, 0.997, 1) Helix has four durations and five curves. Use each curve for one kind of movement: standard for most movement decelerate for something arriving accelerate for something leaving emphasized for a movement you want the user to follow spring for the few places where overshoot looks responsive and does not look like a bug The theme engine takes a motion intent input. Use it to make every component faster or slower at once. Each component handles reduced motion The base layer has a global rule that caps animation and transition durations when a user has asked for reduced motion. The global rule does not apply inside any component. *, *::before, *::after { … } The * selector does not cross a shadow boundary. The rule applies to your prose, your layout, and the base layer's own recipes. It does not apply to the ninety-odd components that draw inside a shadow root. Each component that animates handles prefers-reduced-motion in its own stylesheet. Fifty-nine components animate, and all fifty-nine have this rule. A component that animates without one fails the build. The same applies to your own components. If you write a component with a shadow root, the global rule does not cover it. This comes from how * works in CSS, so it applies outside Helix too. It is the easiest accessibility regression to ship without noticing. @media (prefers-reduced-motion: reduce) { :host { animation: none; transition: none; } } What reduced motion changes Some transitions show a relationship, such as a panel that slides out of the control that opened it. Others are decorative, such as a floating effect. With reduced motion, Helix removes decorative movement. It shortens transitions that show a relationship until they are close to instant, without an abrupt jump. Anything that moves continuously without input stops completely: The aura shader Marquees The pulse loader The turning Loader slows to one turn every four seconds. A loader that stops looks broken, and the turn still shows that work is in progress. The pending ring on IconButton slows the same way. Pause the page's motion Motion that starts by itself and runs longer than five seconds needs a way to pause it, under WCAG 2.2.2. Motion Toggle pauses all of it on the page at once, and a second press lets it run again: <helix-motion-toggle>Pause motion</helix-motion-toggle> While the page's motion is paused: Carousel stops rotating under autoplay. Video pauses a video that started itself, and plays it again after. Aura, Orb, and Strands hold the frame they show. A graph that connectGraph lays out stops where its notes stand, and its three.js view stops turning. A map layer's frames stop on the frame they show. The choice is the page's, held on the document element as data-helix-motion="paused". Set it in your markup to start the page paused, or call pauseMotion from @fusion.dev/helix-core, and select on the attribute to pause motion of your own: import { pauseMotion } from '@fusion.dev/helix-core' pauseMotion() pauseMotion(false) With reduced motion set, Carousel and Video do not start by themselves, and a graph lays out its notes with the drawing hidden, then shows them where they settle. A graph layout that runs past five seconds also offers its own button, in the graph's frame, that stops it where the notes stand. Starting styles and view transitions Overlays use @starting-style to animate in. It sets a starting value and needs no duration token of its own. The transition that runs from it uses the tokens above. The library does not use view transitions. A view transition runs between two states of the document, so a component cannot own one. If you want view transitions, start them from your own code.