Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jmdisuanco/jm-react-anime
JM's react-animejs
https://github.com/jmdisuanco/jm-react-anime
animation anime animejs library react react-anime react-animejs reactjs
Last synced: 27 days ago
JSON representation
JM's react-animejs
- Host: GitHub
- URL: https://github.com/jmdisuanco/jm-react-anime
- Owner: jmdisuanco
- License: mit
- Created: 2019-07-17T12:49:43.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-02-24T13:24:13.000Z (over 3 years ago)
- Last Synced: 2024-09-30T08:22:31.491Z (about 1 month ago)
- Topics: animation, anime, animejs, library, react, react-anime, react-animejs, reactjs
- Language: JavaScript
- Homepage: https://jmdisuanco.github.io/jm-react-anime
- Size: 4.17 MB
- Stars: 26
- Watchers: 2
- Forks: 5
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# JM's react-animejs
A React animation library for creating amazing React App.
[Live demo](https://jmdisuanco.github.io/jm-react-anime/)
## Getting Started
### Prerequisites
```
React 16.8 and above
```
### Installing
On your React project directory run
```
npm i react-animejs
```
or
```
yarn add react-animejs
```
## Usage
- Import ReactAnime
```
import ReactAnime from 'react-animejs'
const {Anime, stagger} = ReactAnime
```
- Basic Usage
```javascript
```
- Working with Keyframe
```javascript
```
- Working with timeline
```javascript
```
- With Controller Scrubber
important: use `setMeta` to `` compontent like ` {
const [control, setControl] = useState(null); //controller state
const [meta, setMeta] = useState({
//meta state of the player
control: control,
progress: 0,
currentTime: 0,
duration: 0
});
return (
{
setControl("play");
}}
>
Play
{
setControl("pause");
}}
>
Pause
{
setControl("restart");
}}
>
Restart
console.log(setControl(["seek", e.currentTarget.value]))}
/>
);
};
```
- Events
remember to place `_` in front of event like `_onClick` to call anime on click event
```javascript
```
- Component type
by default Anime Components are `
` but you can declare the type for the component like `button`
```javascript
{
console.log("clicked");
}}
style={{ position: "absolute", width: 50, height: 80, background: "#d5d5d5" }}
initial={[
{
targets: "#self",
height: "150px",
width: "150px",
translateX: 100,
translateY: 300,
easing: "spring"
}
]}
_onClick={[
{
targets: "#self",
scale: 0.5,
easing: "easeInOutSine",
duration: 2000
}
]}
_onMouseEnter={[
{
targets: "#self",
background: "#d3d",
easing: "easeInOutSine",
direction: "alternate",
duration: 2000
}
]}
_onMouseLeave={[
{
targets: "#self",
background: "#d5d5d5",
easing: "easeInOutSine",
duration: 2000
}
]}
>
Default Button
```
## Properties
| Property | Description | Type | Optional |
| -------------- | ----------------------------------------------------------------- | ---------------------------------- | -------- |
| setMeta | use this to pull in progress of the Anime Component | object | true |
| iniital | animation that will run on the initial rendering of the component | object | true |
| \_onUpdate | animation that will run on every update of a component | object | true |
| \_onUnmount | animation that will run on every unmount event of a component | object | true |
| animeConfig | configuration of the Anime of component | object | true |
| explode | chop the string into words or characters | string `'characters'` or `'words'` | |
| explodeOptions | options for the exloded elements | object `{{name:'atomic'}}` | |
## Currently supported events
| | | | | |
| ------------- | --------------- | --------------- | -------------- | ------------- |
| \_onClick | \_onContextMenu | \_onDoubleClick | \_onDrag | \_onDragEnd |
| \_onDragEnter | \_onDragExit | \_onDragLeave | \_onDragOver | \_onDragStart |
| \_onDrop | \_onMouseDown | \_onMouseEnter | \_onMouseLeave | \_onMouseMove |
| \_onMouseOut | \_onMouseOver | \_onMouseUp |
## Contributing
- star this repo
- contribute to the code just `fork` and issue a `pull request`
- share to fellow devs
## Authors
- **JM Disuanco** - _React-AnimeJS component_ - [JM Disuanco](https://jm.disuan.co)
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
## Acknowledgments
- Julian Garnier for his amazing AnimeJS library