https://github.com/rayentellissy/motionpack
React library that effortlessly integrates smooth animations into your React components. Lightweight, intuitive, and ready to enhance your UI.
https://github.com/rayentellissy/motionpack
Last synced: about 1 month ago
JSON representation
React library that effortlessly integrates smooth animations into your React components. Lightweight, intuitive, and ready to enhance your UI.
- Host: GitHub
- URL: https://github.com/rayentellissy/motionpack
- Owner: RayenTellissy
- License: mit
- Created: 2023-12-10T13:55:54.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-14T12:18:05.000Z (over 2 years ago)
- Last Synced: 2025-08-05T08:36:41.983Z (11 months ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/motion-pack
- Size: 284 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# MotionPack
Simple React wrappers to add animations to your components!
## Install
```bash
npm install motion-pack
```
---
Note: Every wrapper component in MotionPack has a default animation, if you would like to customize the animation. You can change the props shown below for each component
## Reveal
```js
import { Reveal } from "motion-pack"
return (
this text will be animated with reveal effect!
)
```
### Reveal Props
| Name | Value |
| ------------ | --------- |
| startingHeight | number |
| duration | number |
| ease | string |
| fade | string |
| delay | number |
- `startingHeight` is the initial height (in pixels) from which the animation begins.
- `duration` is the duration (in seconds) of the reveal animation.
- `ease` is the easing function for the animation, determining the motion curve.
- `fade` Controls whether the animation fades in (0 to 1 opacity) or out (1 to 0 opacity).
- `delay` is the delay (in seconds) before the animation begins.
## MORE TO COME SOON!!