SolutionsPackagesComponentsCLI — Coming soonResourcesDocumentationStorybookChangelogBlogAboutSign up freeGet early access

Documentation

@ds-gn/motion 0.8.0

Introduce @ds-gn/motion, a token-driven motion engine on the Web Animations API. It provides timeline (ordered steps with overlap timing), sequence (staggered elements with start/e

← All @ds-gn/motion releases

Public Beta compatibility policy

Minor change

Introduce @ds-gn/motion, a token-driven motion engine on the Web Animations API. It provides timeline (ordered steps with overlap timing), sequence (staggered elements with start/end/center/random order, a maxDuration cap on the start spread, and data-motion-role choreography), awaitable enter/exit that reverse from the current position when interrupted, inView viewport triggers, and the slideUp, fade, and scaleIn presets. Durations and easings resolve from the motion custom properties with fallbacks matching @ds-gn/tokens. Under prefers-reduced-motion, movement is dropped, offsets collapse, and promises still resolve. MotionController in @ds-gn/motion/lit adds viewport-triggered timelines and sequences with cleanup on disconnect. Both entry points are safe to import during server rendering.

Includes full-edge sheet presets (slideInLeft, slideInRight, slideInTop, slideInBottom) with reduced-motion fade substitutes, and independent pseudo-element animation via pseudoElement, including dialog backdrops.

A timeline entrance clears earlier held exits when it completes, and cancelled or replaced playback handles cannot restart stale effects through finish().

© 2026 LightLeap Labs LLC. All rights reserved. · Terms of Service · Privacy Policy · Cookies · Contact · Support