Building a Web-Based Motion Graphics Editor
What would a modern motion graphics editor look like?
Update: Years after writing this article I ended up launching Motionity, a motion graphics editor that is a mix between After Effects and Canva:
Design tools are all the rage these days, with new and rising products within prototyping (InVision Studio), version control (Abstract), collecting & giving feedback (Pastel), creating mockups (Artboard Studio), design-centric website builders (Webflow), collaborative design tools (Figma), and many more. Despite that, there’s still an area within design which hasn’t had much innovation, and is still rather monopolized — motion graphics.
Motion graphics & animation are used in a large range of scenarios, be it for videos, teasers, web interactions, pitches, and much more. And yet, your only option is to use Adobe After Effects if you want to have complex animations and motion off-rails.
I had this realization earlier this year, which led me to start developing a HTML5 web-based motion graphics tool, easy to use and affordable, as an alternative to Adobe After Effects. This was the process.
The Minimum Viable Product
Being a rather ambitious project, outside of my comfort zone development-wise, I decided to go for an unusual approach.
Instead of starting by studying the concept, designing its interface, flows, gathering feedback, and more, I got straight into the action by implementing the basic features a motion graphics editor needs to work , and ensuring that I could put together a MVP (minimum viable product) by myself. I am always wary of the time projects take (my time is limited, as well as my resources), and I would rather determine their viability early on, than be surprised midway through its development.
Within 3 days I had managed to put together a renderer through HTML5 Canvas, allowing me to hard-code animations in JavaScript and export as a GIF or image sequence by getting the data from each frame. A few days later I put together the timeline from scratch (there’s almost no JavaScript timeline libraries out there!), together with some basic layering (I began by being able to create & animate textboxes, later I implemented basic image & footage import & animation).
It was all going incredibly well, having been able to develop many complex features in a rather short timeframe (except for some bugs that took a while to fix), and even having created several animations with it (I actually use my tool versus After Effects for animating GIFs because of the direct export to GIF feature). Because of that, I decided it was time to get back to square one, having proven that my idea worked.
Designing a Better Motion Graphics Tool
At this point, I had to start from the beginning. I knew I could develop the editor, which was my main concern to get it off the ground, but there was still a lot of work to do. I began by determining its principles and the areas of focus of the tool. Here are some of the main takeaways:
- Accessible. This means many things — being affordable, not platform-dependant, and simple enough to use (at least compared to a tool like Adobe After Effects).
- Specialized. In order to stand out and more easily get a place in the market (the do-it-all tool already exists), the editor would have to be specialized in 2D motion graphics.
- Modern. Considering the field hasn’t had much innovation over the past years, introducing new features and an up-to-date design would be key to the success of the tool.
- Connected. A great way to maintain a user-base when it comes to design tools is to create a network. An asset store with user-created resources & templates, as well as plug-in support would go a long way to ensure people stay in the platform.
After doing that, I had a much clearer picture of what I wanted to make, and it led me to collecting direct feedback from potential users to ensure I was building something people really wanted, which really helped me polish the concept.
Since what I was building would be a direct competitor to Adobe After Effects, I also studied it in-depth. I had the advantage of being very familiarized with the tool, having used it frequently for interactions, animations, and more, so I was aware of several small and big inconveniences present in the workflow for the projects I was working on, such as being unable to export as GIF, having to switch between a lot of tabs to go through compositions, not seeing which keyframes had change between them and which were “static” (also brought up here), and overall being overwhelmed with lots of panels and buttons in the interface (many of which aren’t even used for 2D motion graphics).
Now all I had to do was to solve those issues and put together a concept combining all the ideas and features I had come up with.
Sketching and Wireframing
When it comes to designing the interface of a product, I tend to always follow the same process. I start by going off my laptop and writing everything down in my notebook. This helps me focus — sometimes I’ll spot a flaw or inconsistency in my ideas that I wouldn’t have noticed otherwise. It’s also a great way for me to be inspired and be more creative, which can lead to coming up with new ideas and new directions that could greatly improve a product.
Once I’ve filled my notebook with notes, I can start sketching out the layout of the product. For this project, I started by outlining the different areas of the editor (timeline, canvas, toolbar, layer settings…), through simple blocks. This led to different iterations which I used as a base to implement specific elements, such as the list of layers for the timeline, buttons for the toolbar, and sections for the layer settings panel. It works a bit like a puzzle — trying to find a way to make everything fit and work together, while following basic design principles. After I felt like I had enough iterations, I moved on to digitalizing everything.
My tool of choice for designing interfaces is Figma, being in the web, with collaborative features (helpful to share my work with others and showcase it live) and a simple way to collect feedback. Before designing anything, I always start by gathering inspiration from all over the web (sometimes I do this in the sketching process as well). This allows me to explore different distributions, styles, color palettes, and more.
I went through a lot of iterations to end up with a cohesive and intuitive editor, having to re-organize entire sections and finding workarounds to make the interface less cluttered while still being easy to understand.
The Final Product
After testing and showing different versions of the editor to potential users while collecting feedback, I managed to create a UI true to my vision and the principles I had initially established for the product.
I went for a light interface as opposed to Adobe After Effects’ dark UI in order to make it feel approachable and less cluttered, which in turn made it feel way more friendly to beginners. Aside from that, since I decided to build the product in the niche of 2D motion graphics, I added a panel on the right with different settings to style the layers, similar to other vector editing tools.
Timeline area
The timeline of the editor is similar to the one in Adobe After Effects, but it has its own differences. I wanted to ensure the users didn’t feel overwhelmed by it, so I simplified it. For example, in the layer section, I only show the icon determining the layer type (with a customizable color) and the label. To see more settings, the user can hover to reveal buttons to hide, lock, or add a parent to the layer. Another difference is the heading of this section, which includes a search feature (particularly useful when working on big projects with lots of layers).
One small detail that greatly improves the workflow is in the keyframe area — displaying change between keyframes through a thin line. This is helpful to move more easily throughout the timeline, since the user can see the periods of time where a layer is static or transitioning, instead of having to check by previewing parts of the animation.
The Canvas
The canvas of the tool is rather unusual for an animation tool. Taking inspiration from editors such as Figma or Sketch, instead of seeing only one scene at once (in After Effects, it’s called a composition), you have them all in sight. Because of that, you don’t need to switch back and forth between tabs to compare the changes, but can work in context and more efficiently animate the different sections of the project. The timeline automatically changes depending on the scene the user is working on, showing the respective layers.
Toolbar & settings
I added a toolbar on the left for multiple reasons. I wanted to ensure there was enough vertical space for the canvas, since the timeline area already takes a big chunk, and I needed to have a top bar with some menus and settings. I also needed to distinguish between tools and other types of actions, which I could do very easily vertically by putting the tools at the top, and the rest at the bottom. As to make importing files easier, I included a quick shortcut in the toolbar, together with the project settings and a button to access the resource store (for community-made assets, templates, and more).
As per the right panel of the editor, I prioritized simplicity and a modular style. Because of that, users can collapse sections and reorder them however they like, depending on what they use the most. The panel has 2 tabs, one for the layer being edited at the time, and another one for the scene in general.
Okay, but where’s the tool?
Having managed to both develop the core functionality of the motion graphics editor and design a cohesive interface for it, I was on my way to actually build the entire tool, and make it happen.
At least, that’s how I expected it to go. A project of this scope takes time, as well as resources, which I did not have. My plan was to build the product in 6–12 months (for an initial MVP), dedicating to it exclusively, but life got in the way, and I couldn’t put the time towards the project anymore, since I had to prioritize freelance work to make ends meet. In the end I decided to keep the project on hold, and instead go after a full-time job, focusing on smaller projects to expand my portfolio.
I still don’t have a new plan for the motion graphics editor — I’ve got a working version (as I explained in the MVP section of this article), and I could either open source my work to date, build a smaller version (e.g. narrowing it down to a very specific area such as simple animated GIFs), or keep it for the future, when I am in a position to build the whole thing. Ideas welcome!
I am also open to opportunities — just send me a mail at hi@alyssax.com! 💜
