React Animated Components Repository

This repository aims to be a curated collection of open-source React component libraries that offer interesting, complex, and beautifully animated components. The goal is to provide developers with a quick reference and reusable examples to enhance their React applications with stunning animations.

Repository Structure

The repository will be organized as follows:

react-animated-components/
├── README.md
├── motion-examples/
│   ├── src/
│   ├── public/
│   ├── package.json
│   └── ... (other Motion-specific files)
├── react-spring-examples/
│   ├── src/
│   ├── public/
│   ├── package.json
│   └── ... (other react-spring-specific files)
├── react-bits-examples/
│   ├── src/
│   ├── public/
│   ├── package.json
│   └── ... (other React Bits-specific files)
└── ... (additional library examples)

Each library will have its own dedicated directory containing a minimal React application demonstrating various animated components from that library. This approach allows for isolated examples and easy testing.

Libraries Included

1. Motion (Framer Motion)

Description: Motion is a production-ready animation library for React, offering a powerful and flexible API for creating physics-based animations, gestures, and layout transitions. It's known for its declarative syntax and performance.

Key Features:

• Declarative animation syntax
• Physics-based animations (springs)
• Gestures (drag, hover, tap)
• Layout animations with AnimatePresence
• Scroll-linked animations

Official Documentation: https://www.framer.com/motion/

Examples: (To be added in motion-examples/)

2. react-spring

Description: react-spring is a spring-physics based animation library that aims to cover most of UI animation needs. It provides a flexible and performant way to animate anything, from simple values to complex SVG paths.

Key Features:

• Physics-based animations
• Hooks-based API (useSpring, useTransition, useTrail, useChain)
• Supports various targets (web, native, three, konva, zdog)
• Imperative API for performance-critical animations

Official Documentation: https://react-spring.dev/

Examples: (To be added in react-spring-examples/)

3. React Bits

Description: React Bits is a collection of high-quality, animated, interactive, and fully customizable React components designed to help build stunning user interfaces. It focuses on providing ready-to-use, visually appealing components.

Key Features:

• Curated collection of animated UI components
• Easy to integrate and customize
• Focus on modern and aesthetic designs
• Open-source and community-driven

Official Website: https://reactbits.dev/

Examples: (To be added in react-bits-examples/)

Usage

To use the components from this repository:

1. Clone the repository:

   git clone https://github.com/your-username/react-animated-components.git
   cd react-animated-components

2. Navigate to the desired library's example directory (e.g., cd motion-examples).
3. Install dependencies:

   npm install
   # or
   yarn install

4. Run the example application:

   npm start
   # or
   yarn start

5. Explore the src directory of each example to see how the components are implemented and integrated.

Contributing

Contributions are welcome! If you have a favorite animated React component library or a great example to share, please open a pull request.

License

This project is open-source and available under the MIT License.