Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/solidjs-community/solid-motionone
A tiny, performant animation library for SolidJS
https://github.com/solidjs-community/solid-motionone
animation solidjs waapi
Last synced: 3 days ago
JSON representation
A tiny, performant animation library for SolidJS
- Host: GitHub
- URL: https://github.com/solidjs-community/solid-motionone
- Owner: solidjs-community
- License: mit
- Created: 2024-01-02T13:31:58.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-01-04T10:27:38.000Z (11 months ago)
- Last Synced: 2024-04-14T00:25:52.162Z (7 months ago)
- Topics: animation, solidjs, waapi
- Language: JavaScript
- Homepage:
- Size: 173 KB
- Stars: 55
- Watchers: 3
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Solid MotionOne
[](https://pnpm.io/)
[](https://www.npmjs.com/package/solid-motionone)
[](https://www.npmjs.com/package/solid-motionone)
**A tiny, performant animation library for SolidJS. Powered by [Motion One](https://motion.dev/).**
## Introduction
Motion One for Solid is a 5.8kb animation library for SolidJS. It takes advantage of Solid's excellent performance and simple declarative syntax. This package supplies springs, independent transforms, and hardware accelerated animations.
## Installation
Motion One for Solid can be installed via npm:
```bash
npm install solid-motionone
# or
pnpm add solid-motionone
# or
yarn add solid-motionone
```
## Create an animation
Import the `Motion` component and use it anywhere in your Solid components:
```tsx
import {Motion} from "solid-motionone"
function MyComponent() {
return Hello world
}
```
The `Motion` component can be used to create an animatable HTML or SVG element. By default, it will render a `div` element:
```tsx
import {Motion} from "solid-motionone"
function App() {
return (
)
}
```
But any HTML or SVG element can be rendered, by defining it like this: ``
Or like this: ``
## Transition options
We can change the type of animation used by passing a `transition` prop.
```tsx
```
By default transition options are applied to all values, but we can also override on a per-value basis:
```tsx
```
Taking advantage of Solid's reactivity is just as easy. Simply provide any of the Motion properties as accessors to have them change reactively:
```tsx
const [bg, setBg] = createSignal("red")
return (
setBg("blue")}
animate={{backgroundColor: bg()}}
transition={{duration: 3}}
>
Click Me
)
```
The result is a button that begins red and upon being pressed transitions to blue. `animate` doesn't accept an accessor function. For reactive properties simply place signals in the object similar to using style prop.
## Keyframes
Values can also be set as arrays, to define a series of keyframes.
```tsx
```
By default, keyframes are spaced evenly throughout `duration`, but this can be adjusted by providing progress values to `offset`:
```tsx
```
## Enter animations
Elements will automatically `animate` to the values defined in animate when they're created.
This can be disabled by setting the `initial` prop to `false`. The styles defined in `animate` will be applied immediately when the element is first created.
```tsx
```
## Exit animations
When an element is removed with `` it can be animated out with the `Presence` component and the `exit` prop:
```tsx
import {createSignal, Show} from "solid-js"
import {Motion, Presence} from "solid-motionone"
function App() {
const [isShown, setShow] = createSignal(true)
return (
setShow(p => !p)}>Toggle
)
}
```
`exit` can be provided a `transition` of its own, that override the component's `transition`:
```tsx
```