Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aj1732/framer-motion-template
Compilation of Framer motion animations
https://github.com/aj1732/framer-motion-template
framer-motion javascript reactjs
Last synced: about 5 hours ago
JSON representation
Compilation of Framer motion animations
- Host: GitHub
- URL: https://github.com/aj1732/framer-motion-template
- Owner: AJ1732
- Created: 2024-06-05T19:11:35.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-08-21T19:55:14.000Z (6 months ago)
- Last Synced: 2024-12-13T23:34:03.205Z (about 2 months ago)
- Topics: framer-motion, javascript, reactjs
- Language: JavaScript
- Homepage: https://1732-framer-motion-template.netlify.app/
- Size: 250 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Framer Motion Animation Showcase
Welcome to the Framer Motion Animation Showcase repository! This project features a collection of animations implemented using Framer Motion, inspired by various tutorials and examples found on YouTube. The web page is designed to be user-friendly and visually appealing.
## Table of Contents
- [Demo](#demo)
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [Technologies Used](#technologies-used)
- [Contributing](#contributing)
- [License](#license)
- [Acknowledgements](#acknowledgements)
## Demo
Check out the live demo of the project [here](https://1732-framer-motion-template.netlify.app/).
## Features
- A variety of animations implemented using Framer Motion.
- User-friendly design for easy navigation.
- Responsive layout to ensure the showcase looks great on all devices.
## Installation
To get a local copy up and running, follow these simple steps:
1. **Clone the repository:**
```sh
git clone https://github.com/AJ1732/framer-motion-template.git
```
2. **Navigate to the project directory:**
```sh
cd framer-motion-template
```
3. **Install dependencies:**
```sh
npm install
```
## Usage
1. **Start the development server:**
```sh
npm run dev
```
2. Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
## Technologies Used
- **React**: A JavaScript library for building user interfaces.
- **Framer Motion**: A production-ready motion library for React.
- **TailwindCSS**: For styling the components.
## Contributing
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
1. Fork the Project
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
## Acknowledgements
- [Framer Motion Documentation](https://www.framer.com/api/motion/)
- [Tom is Loading](https://www.youtube.com/@tomisloading), [Rithmic](https://www.youtube.com/@iamrithmic), [Olivier Larose](https://www.youtube.com/@olivierlarose1) for the inspirational tutorials.
- [React Documentation](https://reactjs.org/docs/getting-started.html)
- [TailwindCSS](https://tailwindcss.com/docs/installation)