/Drag-and-Drop-Animation-Builder

This is a simple web-based animation builder that allows users to create animations through drag and drop interactions. The builder includes features such as adding keyframes, deleting keyframes, and playing animations.

Primary LanguageHTML

Drag and Drop Animation Builder

This is a simple web-based animation builder that allows users to create animations through drag-and-drop interactions. The builder includes features such as adding keyframes, deleting keyframes, and playing animations.

Features

  • Drag and Drop: Easily move elements around the animation container by clicking and dragging.
  • Rotation: Roate The Shape
  • Colour: Change the Shape Colour in each keyframe
  • Custom Image as shape: add a URL for a image to replace the shape
  • Speed: Change animation speed,
  • Keyframes: Add keyframes to record the position and shape of elements at specific times.
  • Timeline: Visualize and navigate keyframes with a timeline interface.
  • Play and Pause: Play animations in real-time or pause them at any point.
  • Shape Selection: Choose different shapes (e.g., square, circle) for the animated element.

How to Use

  1. Open index.html in a web browser.
  2. Use the controls to add keyframes, delete keyframes, select shapes, play, and pause animations.
  3. Click and drag on the animation container to create keyframes.

Getting Started

Clone the repository:

git clone https://github.com/your-username/drag-and-drop-animation-builder.git