https://github.com/randilt/react-animate-onview
A lightweight React component for adding smooth, customizable animations to elements as they enter the viewport.
https://github.com/randilt/react-animate-onview
Last synced: 8 months ago
JSON representation
A lightweight React component for adding smooth, customizable animations to elements as they enter the viewport.
- Host: GitHub
- URL: https://github.com/randilt/react-animate-onview
- Owner: randilt
- License: mit
- Created: 2024-08-10T07:18:30.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-11T04:59:58.000Z (almost 2 years ago)
- Last Synced: 2025-01-31T04:23:46.767Z (over 1 year ago)
- Language: TypeScript
- Size: 49.8 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Animate OnView
[](https://badge.fury.io/js/react-animate-onview)
[](https://opensource.org/licenses/MIT)
A lightweight React component for adding smooth, customizable animations to elements as they enter the viewport. Built with Framer Motion, this package makes it easy to create engaging scroll-based animations in your React applications.
## Features
- Easy to use React component
- Customizable animation types (fade, slide, zoom, rotate)
- Configurable animation duration and delay
- Viewport detection for triggering animations
- Staggered animations for multiple elements
- TypeScript support
## Installation
```bash
npm install react-animate-onview framer-motion
```
or
```bash
yarn add react-animate-onview framer-motion
```
## Usage
Here's a basic example of how to use the `AnimateOnView` component:
```jsx
import React from "react";
import { AnimateOnView } from "react-animate-onview";
const MyComponent = () => {
return (
This will animate when it enters the viewport
);
};
export default MyComponent;
```
## API
The `AnimateOnView` component accepts the following props:
- `animation` (required): The type of animation to apply. Options include:
- `"fadeInFromBottom"`
- `"fadeInFromLeft"`
- `"fadeInFromRight"`
- `"zoomIn"`
- `"rotateIn"`
- `duration` (optional): The duration of the animation in seconds. Default is 0.5.
- `delay` (optional): The delay before the animation starts in seconds. Default is 0.
- `staggerDelay` (optional): The delay between each child element's animation when using staggered animations. Default is 0.1.
- `viewportOnce` (optional): If true, the animation only happens once when the element comes into view. Default is false.
- `viewportAmount` (optional): The amount of the element that needs to be in view before the animation triggers. Default is 0.1.
## Examples
### Fade in from bottom
```jsx
This paragraph will fade in from the bottom
```
### Zoom in with delay
```jsx
```
### Rotate in once
```jsx
Rotating Card
This card will rotate in once when it enters the viewport
```
### Staggered animation for multiple elements
```jsx
Staggered Animation
This paragraph appears after the heading
This button comes last
```
### Complex layout with mixed animations
```jsx
Welcome to My Site
Here's some introductory text.
Call to Action
© 2024 My Company
```
## Contributing
Contributions are always welcome! Here's how you can help:
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
Please make sure to update tests as appropriate and adhere to the existing coding style.
### Development
To set up the development environment:
1. Clone the repository
2. Install dependencies with `npm install`
3. Run the build process with `npm run build`
4. To test your changes, you can use `npm link` in the package directory and then `npm link react-animate-onview` in your test project
### Reporting Issues
If you find a bug or have a feature request, please open an issue on the GitHub repository. Provide as much information as possible, including steps to reproduce the issue if applicable.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Acknowledgments
- Thanks to [Framer Motion](https://www.framer.com/motion/) for providing the animation capabilities.
- Inspired by the need for simple, reusable animation components in React applications.
---
Made with ❤️ by Randil Withanage