A lightweight, high-performance animation library for SolidJS. Powered by Motion.

中文文档

is an animation library for SolidJS inspired by motion/react design.

This project is still in the testing phase, and the author is currently learning motion/react. I hope to utilize excellent animation components in upcoming Solid projects. I am collecting React components that I find outstanding and providing open-source Solid implementations in the project motion-primitives-solid. I am exploring potential issues solid-motion may face in production-grade applications.

Visit the online preview.

Motion for Solid can be installed via npm:

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

import {Motion} from "solid-motion"

function App() {
  return (
    <Motion
			initial={{ opacity: 0, rotate: -30 }}
			animate={{ opacity: 1, rotate: 0 }}
			exit={{ opacity: 0, rotate: 30 }}
			transition={{ duration: 0.5 }}
		>
			This is a notification!
		</Motion>
  )
}

import { createSpring } from "solid-motion";

const [cursorPos, setCursorPos] = createSignal<{ x: number, y: number}>({ x: 0, y: 0 });

const springX = createSpring(() => cursorPos().x);

Update cursorPos when mouse moves

setCursorPos({ x: 500, y: 0 });

Track springX changes in a reactive way

createEffect(() => {
	console.log("spring change: ", springX());
})

Native functions provided with the create prefix all represent reactive handling. Spring also provides a useSpring function, which also has the ability to receive reactive values, but returns a motion MotionValue object.

Special thanks to the following projects for inspiration and reference:

• motion-vue - solid-motion project is a rewrite of Solid Motion based on Motion Vue
• solid-motionone - Referenced the project structure and the implementation of the Presence node