https://github.com/maxam2017/react-layout-motion
A small, fast layout animations library for React using the WAAPI
https://github.com/maxam2017/react-layout-motion
Last synced: 6 months ago
JSON representation
A small, fast layout animations library for React using the WAAPI
- Host: GitHub
- URL: https://github.com/maxam2017/react-layout-motion
- Owner: maxam2017
- License: mit
- Created: 2025-06-17T23:23:06.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-26T15:37:41.000Z (about 1 year ago)
- Last Synced: 2025-07-02T08:18:44.615Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://react-layout-motion.vercel.app
- Size: 77.1 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-layout-motion
A small, fast layout animations library for React using the Web Animations API.
```bash
npm install react-layout-motion
```
## Basic Usage
```jsx
import { Motion } from 'react-layout-motion';
function App() {
return (
This element will animate smoothly when its layout changes
);
}
```
## API
### Motion Component
The component for creating layout animations.
#### Props
| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `layoutId` | string | Yes | Unique identifier for the element to track layout changes |
| `children` | ReactNode | Yes | The content to be animated |
| `as` | ElementType | No | The HTML element to render (default: "div") |
| `style` | CSSProperties | No | Additional CSS styles |
| `config` | object | No | Animation configuration |
| `config.duration` | number | No | Animation duration in milliseconds (default: 300) |
| `config.easing` | string | No | CSS easing function (default: "cubic-bezier(0.25, 0.1, 0.25, 1)") |
## Examples
### Custom Animation Configuration
```jsx
Slower, custom easing animation
```
## Requirements
- React >= 16.8.0
- Modern browser with Web Animations API support (https://caniuse.com/web-animation)
## License
MIT