Animate Your Web Content With MotionComposer

With Adobe’s “no CS7” announcement, everyone seems a little shaken up. Some are even looking for good software alternatives already. If you’re one of them, this app may catch your attention.

Let us introduce you to MotionComposer. MotionComposer is Aquafadas’ answer to Adobe’s Edge Animate or Tumult’s Hype, so if you are a web developer having a tough time animating websites with HTML5 and CSS3, it’s an app you should be checking out.


MotionComposer HTML5 Preview window.

MotionComposer Overview

We’ve all played around with lines and lines of code trying to conjure up the coolest HTML5 and CSS3 animations, but we can all agree that this can be a little hectic and time consuming. That’s why apps like MotionComposer exist.

MotionComposer gives you the ability to create your animated vision using a friendly UI that generates the code for you. You won’t have to deal with any code, which makes this app perfect for non-developers.


MotionComposer’s intuitive UI

Working with MotionComposer

The first time you open up MotionComposer, you will be greeted with the welcome screen that helps you get started with the product. You will find the intro video to be the most useful. (I like videos, anyways.) Technically, by watching their introductory video, you can get a good idea on how to operate this application and create something basic – add to that the fact that you can use pre-made templates, and you’ll be set.

Once you start your first project – whether you use a pre-made template or start with a blank document – you will get a very clean UI that isn’t as daunting and as intimidating as most design/development apps. This is great because users won’t have to spend so much time learning the ins and outs of the app.

MotionComposer gives you a canvas and timeline UI that most users will be familiar with. You can interact with these pieces easily. The other parts are as intuitive as the timeline and canvas, but they do tend to be more option-heavy. Most of your time will be spent on the Inspector tab where you can edit slides and document settings as well as Components (layers/items) gradients, effects, opacity, and other properties. This area gives you a lot of flexibly when creating your content, and it is all labeled and divided into understandable chunks.

The upper section of the app let’s you add media, text, rectangles and preview or publish your work. This is where knowing what you can do with a rectangle comes in handy. If you round all the borders of the rectangle, you can make a circle. You can create many shapes and other things with CSS3, but MotionComposer only gives you the rectangle. It would be nice if it gave you access to other CSS3 shapes. It would be even cooler if you could create your own elaborate shape.


Transforming a rectangle into a circle.

MotionComposer’s Missing Tools

As cool as it is to play around with MotionComposers capabilities, though, I can’t help but to notice a few things missing. For starters, custom fonts aren’t supported. The app only allows you to use web-safe fonts, so if you want to get creative with your typography, you’ll need to use pictures instead of fonts.

That isn’t it. The ability to add shadows, or glow effects to elements is only supported for your Flash export. Why? You can achieve these effects with CSS3, so why doesn’t the app support that? This goes for text as well. If you want to add shadows or some kind of style to your text, you won’t be able to do it with this app.


MotionComposer’s publish settings.

Which brings us to this question: why is there no code editor? Sure, some may not want to deal with code, but what if you want to learn how to do this by hand? MotionComposer could serve as an amazing learning tool, but sadly there isn’t even a preview of the code.

The code editor would be useful if you want to add your own styles, too. You could add a crazy gradient to your text and then animate it. Of course you can do this after you export it, but that will probably have you deal with other factors of your animation.


MotionComposer’s exported project.

The Verdict

MotionComposer has a lot of room to grow, but it is hard not to see the advantages of using an app like this one. You can create amazing HTML5 banners, ads, sliders, and so on with ease; you could even make a simple piano, if you so desire. However, if you plan on doing bigger, more elaborate things, you might want to spend your money on another app. Which is interesting considering that MotionComposer’s main competitor is 100 dollars less and doesn’t require you to have Flash player.


Easily animate your website content