Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/helpscout/motion
💫 Motion: A simple animation library for React
https://github.com/helpscout/motion
animation motion open-source react
Last synced: 9 days ago
JSON representation
💫 Motion: A simple animation library for React
- Host: GitHub
- URL: https://github.com/helpscout/motion
- Owner: helpscout
- License: mit
- Created: 2019-01-28T22:31:28.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-06-19T16:54:22.000Z (over 5 years ago)
- Last Synced: 2024-10-07T05:47:58.520Z (about 1 month ago)
- Topics: animation, motion, open-source, react
- Language: JavaScript
- Homepage: https://helpscout-motion.netlify.com/
- Size: 1.2 MB
- Stars: 2
- Watchers: 10
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 💫 Motion
[](https://travis-ci.org/helpscout/motion)
[](https://badge.fury.io/js/%40helpscout%2Fmotion)
> A simple animation library for React
**[Check out the demo](https://helpscout-motion.netlify.com/)**
## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Documentation](#documentation)
- [See Also](#see-also)
- [Thanks!](#thanks)
## Installation
```
npm install --save @helpscout/motion
```
## Usage
Start adding animations to any React component with the `Motion` component:
```jsx
import React from 'react'
import {Motion} from '@helpscout/motion'
import Zoolander from './components/Zoolander'
class App extends React.Component {
render() {
return (
)
}
}
// Technically these animation callbacks can be writing in line.
// It's advisable to keep them as separate functions to make the code
// more readable.
function fadeInAndMoveUp({animate}) {
return animate({
opacity: [0, 1],
translateY: [-20, 0],
}).finished
}
function fadeOut({animate}) {
return animate({
opacity: [0, 1],
duration: 500,
easing: 'linear',
}).finished
}
```
## Documentation
For additional info on Motion, check out [our documentation](./docs)!
## See Also
- [react-utils](https://github.com/helpscout/react-utils)
- [stats](https://github.com/helpscout/stats)
## Thanks!
A big thanks to [Julian Garnier](https://github.com/juliangarnier) for creating [Anime.js](https://github.com/juliangarnier/anime), which powers the animations for Motion.