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.

Getting Started

Installation

# npm
npm install motion-solid
# yarn
yarn add motion-solid
# pnpm
pnpm add motion-solid
# bun
bun add motion-solid

Basic usage

import { motion } from "motion-solid";

<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} />;

Exit animations

import { AnimatePresence, motion } from "motion-solid";
import { Show } from "solid-js";

<AnimatePresence>
  <Show when={open()}>
    <motion.div exit={{ opacity: 0 }} />
  </Show>
</AnimatePresence>;

Server-side rendering

Motion components render with initial styles on the server, or with animate styles when initial is false or undefined.

Next steps