Solid Motion

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

中文文档

Introduction Motion for Solid

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.

Installation

Motion for Solid can be installed via npm:

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

Usage Examples

Basic Enter/Exit Animation

import{Motion}from"solid-motion"functionApp(){return(<Motioninitial={{opacity: 0,rotate: -30}}animate={{opacity: 1,rotate: 0}}exit={{opacity: 0,rotate: 30}}transition={{duration: 0.5}}>
This is a notification!
</Motion>)}

Using Motion Values

Usage with Solid Reactivity

import{createSpring}from"solid-motion";const[cursorPos,setCursorPos]=createSignal<{x: number,y: number}>({x: 0,y: 0});constspringX=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.

Acknowledgments

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