A simple collaborative animation program for animating over audio
Animator was a short (1 week) project to create a simple animation program I could use to make this video:
Animator is collaborative, so it suppors multiple people editing the same animation at once
A demo is available online at https://animator.pfg.pw/
Animator was created using
- Firebase Realtime Database configured with strict security rules
- Firebase Storage
- Firebase Authentication
- Windi CSS, a utility-first CSS library similar to Tailwind
While I have finished developing this project, it is not yet complete. Many workarounds were needed while creating the demo video.
- Switching between tools (pen/eraser) requires editing code and using hot reload to get the changes without reloading the page
- The canvas cannot be zoomed or rotated
- Onion skinning only shows one frame behind and one frame ahead
- Frames cannot be copy/pasted
- Complicated frames take a long time to render
- Playback does not account for the time it takes to render and display a frame on screen. This causes audio to be slightly desynced.
- Undo/Redo are only available on touch devices (two/three finger tap)
- The frame selector can only be zoomed on mobile
- Large projects take a long time to load
- Frames with many actions take a long time to undo
- The final animation cannot be exported. For my project, I used a screen recorder to capture the result and then made some small edits in a video editor.
- In order for multiple people to collaborate on an animation, they must share an account
All of these issues have straightforward solutions if I ever continue developing Animator in the future.