https://github.com/abhinandanmishra1/scratch-animation
https://github.com/abhinandanmishra1/scratch-animation
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/abhinandanmishra1/scratch-animation
- Owner: abhinandanmishra1
- Created: 2024-09-06T02:29:16.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-09-07T11:24:17.000Z (9 months ago)
- Last Synced: 2024-09-07T13:52:29.985Z (9 months ago)
- Language: TypeScript
- Homepage: https://scratch-animation.vercel.app
- Size: 150 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Scratch Application
[Visit Deployed Application](https://scratch-animation.vercel.app/)
A Scratch-inspired application built with React, Vite, TypeScript, and Tailwind CSS. This project replicates the popular Scratch environment, allowing users to create animations, manage multiple sprites, and introduce dynamic interactions between characters.
## Features
1. **Motion Animations**:
- Drag-and-drop animations such as moving steps, turning degrees, and repeating animations.
- Supports various motion controls for precise sprite manipulation.
2. **Multiple Sprites Support**:
- Create and manage multiple sprites within the playground.
- Apply animations to each sprite independently.
- Implement a global play button to animate all sprites simultaneously.
3. **Collision-Based Animation Swap (Hero Feature)**:
- Swap animations dynamically when two sprites collide, adding an interactive element to the playground.
## Tech Stack
- **React** with **Vite**: Fast and modern React framework for web development.
- **TypeScript**: Strongly typed programming language to improve code quality and maintainability.
- **Tailwind CSS**: Utility-first CSS framework for styling.
- **Zustand and Redux Toolkit**: State management libraries used for handling various application states efficiently.
## Implementations
- [x] Implement drag-and-drop functionalities for animations.
- [x] Create and support multiple sprites.
- [x] Add Motion animations: Move steps, turn degrees, Goto x: y, Repeat animation.
- [x] Implement a play button to start animations for all sprites.
- [x] Implement collision-based animation swap (Hero Feature).
- [x] Integrate Zustand and Redux Toolkit for state management.
- [x] Style the application using Tailwind CSS.
- [x] Configure the project with React, Vite, TypeScript, and Tailwind CSS.
## Visuals
### Homepage
### Instructions Modal
### Application View
### Drag and drop motions, with repeat control
https://github.com/user-attachments/assets/4d6db670-58cd-4b26-908d-6ba189c84a2f
### Adding multiple sprites and animating them
https://github.com/user-attachments/assets/a9e8ee38-001a-45d7-9eae-70c723f5e0f0
### Swapping the motions on collision
https://github.com/user-attachments/assets/b6936463-a014-4a56-abc3-f6ac5833fa98