A Chrome extension for creating and recording web animations.

It allows you to inspect elements on web pages, apply animations, and record them using a timeline-based editor. Built with React, PixiJS, and FFmpeg for video processing.

• Element inspection and selection
• Timeline-based animation editor
• Animation playback and recording
• Video export & edit with FFmpeg

1. Download latest webanimate.zip or build the extension using npm run build

   If you downloaded the zip, extract the contents into a folder somewhere you wont delete it.

2. Open Chrome and navigate to chrome://extensions
3. Enable "Developer mode"
4. Click "Load unpacked" and select the unpacked folder or select dist if you built it yourself

1. Click the WebAnimate extension icon to open the side panel
2. Use the element inspector to select elements on the page
3. Add animations on the timeline editor
4. Record and export your animations

While you can add animations to DOM components, record them and download the video (working), things fall apart when you continue editing the recording in the dedicated editor (need to add functionality)

To generate icons from svg:

rsvg-convert -w 16 -h 16 -b none public/logo.svg -o public/icons/icon16.png && rsvg-convert -w 32 -h 32 -b none public/logo.svg -o public/icons/icon32.png && rsvg-convert -w 48 -h 48 -b none public/logo.svg -o public/icons/icon48.png && rsvg-convert -w 128 -h 128 -b none public/logo.svg -o public/icons/icon128.png