https://github.com/dalm1/flowmotion
FlowMotion est une librairie React légère et intuitive pour gérer des transitions fluides entre des pages ou des composants. Basée sur @react-spring/web, elle vous permet de créer des animations dynamiques avec une configuration minimale.
https://github.com/dalm1/flowmotion
Last synced: 3 months ago
JSON representation
FlowMotion est une librairie React légère et intuitive pour gérer des transitions fluides entre des pages ou des composants. Basée sur @react-spring/web, elle vous permet de créer des animations dynamiques avec une configuration minimale.
- Host: GitHub
- URL: https://github.com/dalm1/flowmotion
- Owner: DALM1
- License: mit
- Created: 2024-11-10T14:47:56.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-16T21:48:37.000Z (about 1 year ago)
- Last Synced: 2024-12-07T12:12:57.325Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 17.6 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# **FlowMotion**
**FlowMotion** is a lightweight and intuitive React library for managing smooth transitions between pages or components. Based on **@react-spring/web**, it allows you to create dynamic animations with minimal configuration.
---
## 🚀 **Installation**
Add FlowMotion to your project with npm :
```bash
npm install flowmotion
```
---
## 📖 **Usage**
Here’s how to use **FlowMotion** to animate page or component transitions.
### Basic usage example
```javascript
import React, { useState } from 'react';
import { PageTransition } from 'flowmotion';
const App = () => {
const [location, setLocation] = useState('home');
return (
setLocation('home')}>Home
setLocation('about')}>About
{(item) => (
{item === 'home' ? Welcome to Home Page
: About Us
}
)}
);
};
export default App;
```
---
## ⚙️ **API**
### **PageTransition**
The main component for managing transitions.
| Prop | Type | Description |
|--------------|----------|-----------------------------------------------------------------------------|
| `location` | `any` | A unique key to identify the current state or page (e.g., route, ID). |
| `children` | `func` | A function that returns the content to display during the transition. |
---
## 🧙♂️ **How does it work?**
FlowMotion uses `useTransition` from **@react-spring/web** to animate transitions based on the `location` property. Each new `location` triggers an exit and entry animation.
---
## 📦 **Advanced Example**
Here is an example with custom styles and complex transitions:
```javascript
import React, { useState } from 'react';
import { PageTransition } from 'flowmotion';
const App = () => {
const [location, setLocation] = useState('page1');
return (
setLocation('page1')}>Page 1
setLocation('page2')}>Page 2
setLocation('page3')}>Page 3
{(item) => (
{item === 'page1' && 'This is Page 1'}
{item === 'page2' && 'Welcome to Page 2'}
{item === 'page3' && 'You are on Page 3'}
)}
);
};
export default App;
```
---
## 🛠️ **Advanced Configuration**
You can customize the animations by modifying the styles or the entry/exit settings in `PageTransition`:
```javascript
const transitions = useTransition(location, {
from: { opacity: 0, transform: 'translateY(100%)' },
enter: { opacity: 1, transform: 'translateY(0)' },
leave: { opacity: 0, transform: 'translateY(-100%)' }
});
```
---
## 👩💻 **Contributions**
Contributions are welcome! If you find a bug or have a suggestion, please create an issue or submit a pull request on [GitHub](https://github.com/DALM1/flowmotion).
---
## 📝 **License**
This project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for more information.