Making MographAE

MographAE was created as a solution to a problem of creating complex animations in After Effects without knowing how to code.

Problem Statement

The idea of MographAE came from when I started animation in After Effects using Javascript expressions to automate tedious processes.

By doing this, you can create complex animations very quickly that can be adjusted with only a few controls.

However, this is not accessible. Most animators are not coders, and even if you know how to code, it's not always convenient to build from scratch.

Screenshot of my expression code for the animation to the left

Market Research

Objectives

To figure out what should be in MographAE, I did research on past solutions.

Findings

Software such as Cinema4D, Spline3D, Cavalry, and other programs capable of full procedural pipelines tend to feature three main traits:

  1. Animation driven by a self-contained system
  2. System is node-based

I purchased and tried using several different After Effects scripts from aescripts.com. Most attempted to reproduce all the above 3 behaviors as faithfully as possible, or only replicated a couple of them.

While I respected the approach of other scripts in trying to build a self-contained system, I suspected that it was the wrong direction for After Effects. After Effects is largely used because of its 3rd party tools. So, MographAE should work well with community scripts or plugins.

Other tools researched logos

Talking to Designers

To help figure out the ways in which previous scripts had fallen short, I contacted friends in motion design channels. Of particular help was my friend Denis Bondartsov from Motion Design School, who gave pointers in the ways he was not satisfied with previous solutions. This also helped give me a hint as to what features to develop in the product.

Gauging Online Interest

To see if there would be interest in an alternative solution, I developed early prototypes of some functions in the script and began publicly posting them to twitter. I found that they got lots of attention and support from designers online, which told me that I was on the right track. I continued posting publicly to build interest in the Beta.

Initial Development

Simple Buttons

In my experience using the other scripts, they would often have buttons that do not work or do not function as expected when you use them on something they creator did not intend. Or, critical functionality may be hidden behind an alt-click or panel.

My philosophy is that functions should do the exact same thing no matter what you have selected when you run them. For this reason, I didn't implement alt functions triggered by ALT + CLICK or SHIFT + CLICK.

I also did not implement any special cases where a function does something radically different or doesn't work depending on what is selected. By doing this:

  1. All functions of the script are directly visible and accessible from one click.
  2. The script is open ended because it is based on consistent rules that users can use in ways that I did not intend.
Beta build screenshot of panel
The initial beta build of MographAE

Limited Effectors

I chose to simplify the way that falloff / effectors work in MographAE. Normally, falloff and effectors are separate, but I combine them in MographAE. This is largely for performance reasons and to keep the script simpler to run.

Documentation

I knew that this was a sophisticated tool and it was important to keep track of all possible functionalities. For this reason, I documented all features that I developed in-depth in notion.

Beta

Feedback Form

Once I had garnered enough interest in the script, I committed to releasing a functional beta. I released it on twitter with a feedback form for users.

Notion feedback link screenshot
Link to feedback form on Beta page

Show Help Feature

A common complaint was that, due to the many sliders in the generated MographAE controllers, it would be nice to have explanations as to what each slider does.

When you click "Show Help" in MographAE, it will open the documentation for the selected control effect. This feature was inspired by Cinema4D's function.

Gif showing the show help function
Button to open documentation

Create Sample Comp Feature

After having allowed users to use the product for a few weeks, I wanted to set up zoom calls from users. I was lucky to book a couple from industry motion designers. Amongst the biggest feedback I got from these interviews was that it would be better if there was some way to see what kinds of things you can make with the tool.

My solution was Create Sample Comp, which was inspired by the functionality of another popular tool Crazy Shapes and Cavalry's built in templates.

When the user clicks Create Sample Comp, it creates a sample animation that they can directly interact with, which demonstrates the functions of each button in the script and allows them to inspect the setup themselves.

Create sample comp gif demonstration
Create Sample Composition

Noise Feature

Another thing that came out in user interviews is a request to easily randomize layers. I agreed that this was a missing feature, and added the Noise function as the last missing effector.

Noise function demonstration
Noise Function

Release

After I decided I had tested MographAE well enough in Beta, I released it on the aescripts.com marketplace.

You can follow updates about it with @mographae on twitter.