Beta Status

This library is still in early beta and the API is subject to change and may get daily breaking changes. The documentaton may not be up to date with the latest features and include missing or outdated information. You can always create an issue on GitHub or even better a pull request to fix the documentation or add new features.

Caveats

Differences to motion/react and motion-vue

There are a few Solid-specific differences that can affect behavior:

  1. Exit animations: In React and Vue, the library can keep component instances alive to play exit animations. In Solid, there are no runtime component instances. When <Show> or <For> remove items, motion-solid performs a DOM handoff and keeps the DOM element around instead. Exiting elements are no longer reactive.
  2. Layout animations: Solid signals update the DOM synchronously, so there is no render cycle to hook into. motion-solid tracks common props like class, style, and text content. For other changes, use layoutDependencies to trigger layout measurements.
  3. Animation controls: animate={controls} (AnimationControls) is not supported. Use targets or variants instead.
  4. Custom components: motion(Component) is not supported yet (planned).