https://github.com/khalil-codes/animated-checklist-react

Uses Framer Motion's new animate() and stagger() functions to make a list of items bounce, shimmy and shake!
https://github.com/khalil-codes/animated-checklist-react

framer-motion react tailwind trello

Last synced: 4 days ago
JSON representation

Uses Framer Motion's new animate() and stagger() functions to make a list of items bounce, shimmy and shake!

• Host: GitHub
• URL: https://github.com/khalil-codes/animated-checklist-react
• Owner: Khalil-codes
• Created: 2024-08-16T17:33:06.000Z (4 months ago)
• Default Branch: master
• Last Pushed: 2024-08-16T20:28:51.000Z (4 months ago)
• Last Synced: 2024-11-10T16:22:26.107Z (about 1 month ago)
• Topics: framer-motion, react, tailwind, trello
• Language: TypeScript
• Homepage: https://animated-checklist-khxlil.vercel.app/
• Size: 577 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Animated Checklist

This is a simple React application that demonstrates an animated checklist using Tailwind CSS and Framer Motion.

![Animated Checklist](/media/Animated%20Checklist.gif)

## Features

- An animated checklist with a progress bar

- A list of tasks that can be checked and unchecked

- A visual effect when all tasks are checked

## Getting Started

To get started with this project, follow these steps:

1. Clone the repository

2. Install dependencies using `npm install`

3. Start the development server using `npm run dev`

4. Open your browser and navigate to `http://localhost:5173`

## Technologies Used

- React

- TypeScript

- Vite

- Tailwind CSS

- Framer Motion

## Usage

To use this project, simply add tasks to the `DEFAULT_ITEMS` array in `src/App.tsx`. Each task should have an `id`, `text`, and `checked` property. The `id` should be a unique string, the `text` should be the task name, and the `checked` property should be a boolean indicating whether the task is checked or not.

## Contributing

Contributions are welcome! If you have any suggestions or improvements, please open an issue or submit a pull request.

## License

This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more information.