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.
- 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.
- Open
index.html
in a web browser. - Use the controls to add keyframes, delete keyframes, select shapes, play, and pause animations.
- Click and drag on the animation container to create keyframes.
Clone the repository:
git clone https://github.com/your-username/drag-and-drop-animation-builder.git