Animation Playground is an interactive web application designed to help users experiment with and visualize animations. Users can add elements to a canvas, apply various transformations (translate, rotate, scale, skew), and preview animations with ease.
- Add Elements: Dynamically add new elements (like squares) to the canvas.
- Transformations:
- Translate: Drag and move elements across the canvas.
- Rotate: Rotate elements by dragging or setting rotation angles.
- Scale: Resize elements using handles or input fields.
- Skew: Skew elements along the X and Y axes.
- Animation Controls:
- Set and adjust keyframes.
- Control animation duration, delay, and easing functions.
- Preview & Playback:
- Play, pause, and reset animations.
- Real-time previews of transformations and animations.
- Export/Import:
- Export animations as CSS or JavaScript code.
- Save and reload projects for continued editing.
-
Clone the repository:
git clone https://github.com/yourusername/animation-playground.git
-
Navigate to the project directory:
cd animation-playground -
Install dependencies:
npm install
-
Start the development server:
npm run dev