Web Anim8

Motivation

Ever wanted to try out animation on a very simple scale, or make some silly custom-made GIF to send to your friends for a laugh? You can now, without downloading any complex software or without signing in. Try it out right now at the below link:
https://webanim8.onrender.com/

What it Does

Our application makes 2D animation easy and accessible, right in the browser. It has drawing capabilities featuring an array of tools, timelines to allow for easy frame manipulation, and importing/exporting of files. Files can easily be exported in GIF format. You can also download and save projects and then load them back later right into the web app to continue your work!

How We Built It

We attempted to maintain a very simple working tech stack, using only React (Vite, TypeScript) as the primary framework. Though a backend might be planned in future updates, not including it (initially) allows for a lightweight site and discards the need to manage growing backend/database complexities. For the core drawing functionalities of the app, Fabric.js was used, and gif.js for the exporting files to GIFs. What makes the application complex is the actual logic that goes into building the Timeline and stringing it together with the canvas to produce frames of drawings that in turn produces the animations. Minimal state & information is used (to keep track of selected options) for higher performance.

Challenges We Ran Into

The biggest technical issue we faced was finding the right method of exporting our GIFs. At first we relied on low-level libraries, but we ran into issues with file systems and permissions with the Vite framework that we were not able to work around. We explored the idea of allowing the user to download the individual frames in a zip file (or some other similar alternatives) and give them the choice to compile in whatever format they'd prefer. In the end, we turned to another high-level publicly available interface (in exchange for some flexibility offered by the low-level libraries) to export animations to GIFs, prioritizing user-experience & convenience.

From a less technical perspective, the overall biggest challenge we faced was having faith in ourselves that we could build a project from scratch and see it through to the end, especially without the guidance that we would find in the classroom or online through tutorials or YouTube videos especially since many of our problems were fairly unique to our project circumstances. Through persistence, we were able to accomplish our goal within the allotted time.

Accomplishments That We're Proud Of

The biggest accomplishment is that we actually succeeded in completing the project in 1.5 days, despite all the challenges we faced. At every turn, we were able to come up with creative solutions to achieve the functionality we wanted.

What We Learned

• The experience of participating in a hackathon.
• Trying to keep everything performant e.g. 1) reduce information held by variables & arrays to improve memory, speed up reading & execution. 2) considering other approaches to pulling off some features (improve time complexity), avoid constant loops and if checks, etc.
• What it means to work together and help one another towards a common objective in software development. Finally learning to use collaboration & source control tools like advanced git features. Another example would be careful code design such as building an API (for function calls, renders) that is easy to understand and hard to mess up even for yourself and especially when others use it.
• Patience and determination.
• What it feels working through a sleepless night trying to fix bugs & technical issues that do your head in.

What's Next?

While the core functionalities are in place, here are some features we would like to implement for future updates if support is continued:

1. Dark mode.
2. Eraser tool (depends on type support or we give up TypeScript)
3. Perhaps backend functionality to save work online, connect to databases to view and comment on others' work.
4. Responsive design (accommodate smaller screens).
5. More shortcuts (only A to add new frame and Z to undo right now) and improving frontend UI.