Animatron: HTML5 Online Animation Editor

We’ve just unveiled two big changes in Animatron at once: one’s a brand-new Inspector panel for the text tool (complete with Google fonts and the ability to upload custom fonts) and the other is a new feature - dynamic text effects, which make adding kinetic typography to your project as easy as one mouse click. I’ll put together a quick, simple project to demonstrate how everything works. In fact, we just talked about kinetic typography and dynamic text effects at the Graphical Web Conference in the UK, so I’l recreate the demo project from our presentation. First things first: type something, then select the font field.

You can scroll or search through our library of Google Fonts …

… which is a pretty long list, so to make your life easier, you can favorite the fonts you’re using most often by clicking on the star next to the font name.

Starred fonts will be listed in your Favorites tab, over here.

You can also upload your own font files to the Editor using the “Import” option in the Main Menu. Uploaded fonts show in “uploaded” tab and can also be saved to favorites. (In the very near future you’ll be able to drag TTF files directly into the “upload” tab). I’ve uploaded “OpenSans Bold Italic,” for example.

For our project, we’re going to search for and use a Google font called “Righteous,” it’s the same font as the original logo of the Graphical Web Conference.

So now that we’ve got the font right, we’ll go back to the main Inspector panel and set the fill and stroke colors - you can also change all sorts of other settings here, like bold/underlined/italic, font size, alignment, position on the canvas, size, shadow, opacity, and registration point. If you choose to have the text moving along a path, you can also select “orient to path” here, but that’s for another day …

Now here’s the fun part: text effects.

Animatron provides preset text effects, which means you just select the effect you want, click “apply,” and your text will be animated! In the bottom of the Inspector, you can see a preview of what the effect will look like before you apply it.

So here is our text is with a twister effect (and using the “flow” effect preset):

Next, on another layer, we’ll add the year, 2014, change the fill color, and give it a whoosh effect. Since we want “2014” to appear after “Graphical Web, Winchester UK,” we’ll change its time band so it appears on the canvas at 6 seconds.

Here’s the finished project!

Last weekend, Animatron attended its very first conference! Kate (QA / Usability Engineer) and myself traveled to Cleveland to show off Animatron to a diverse group of designers and developers at the Weapons of Mass Creation festival, and demoing the tool in the wild, so to speak, went really well. We got tons of useful feedback that will help us focus on what features are valuable to our users - exporting animated SVGs, preset easings, and downloading HTML5 code were all very popular features. Overall, it was a great success. Everyone was very friendly and engaged, and we had a great time! It was the first of three other conferences we'll be attending through September: - Graphical Web in Winchester, UK (August 27 - 30). We'll be giving a presentation on animated text effects in HTML5 and SVG. - Reasons to Be Creative in Brighton, UK (September 1 - 3). - Smashing Conference in Freiburg, Germany (September 15 - 16). Here's a picture of our table at WMC - for the full set of pictures, take a look at our album on Facebook.

We recently introduced a new way of visually indicating which objects on the canvas are selected at any given time, and it's a great example of how much difference a small change can make.

Here's what my video cassette looks like in its normal, unselected state:

And here's what it looks like when it's selected - notice that the black outlines are present even around shapes that are hidden behind other shapes in the cassette?

It's like X-ray vision!

Every few months, all of us here at Animatron set aside some time to work with the Editor, creating a project and keeping careful notes of our thoughts and interactions with the product along the way. We think it's really important to actually interact with the tool that we're building! This exercise, which we call "Drinking Your Own Champagne*" is extremely useful in helping us decide what new features and functionalities should be prioritized in development, as well as finding bugs and usability issues.

This summer's Champagne projects were loosely themed around computer science and tech. Take a look at the fruits of our labors below, plus a few thoughts from some team members about what they liked best and missed most about Animatron.

- Catherine Arizan, Marketing Manager

* This tradition actually used to be known as "Eat Your Own Dog Food," a phrase that I personally had never heard before but that Dmitry Skavish, Animatron's CEO, assured me was a common phrase in software development. I guess it is, but when I expressed the opinion that dog food was not a particularly appetizing description of our product, he changed it to "Drinking Your Own Champagne" to lend an air of elegance to the exercise.

"I liked the ability to select multiple keyframes select keyframes with Ctrl+drag and delete individual tweens from the layers panel, as well as the addition of "Snap to Path" to the layers panel's Context Menu." - Natalie

"I missed bone kinematics and/or shape morphing, and I wish that editing bezier curves was easier. I liked that I had the ability to draw something, add different tweens, then arrange things and share them." - Anton

"I was able to create most of the things I had in mind fairly smoothly, but I realized that working with a long timeline becomes quite difficult, and I think some additional features would be helpful to improve the user experience." - Olga

"Looking forward to the ability to paste multiple keyframes." - Volodymyr K.

"I was really impressed with the new color chooser, but I really missed snapping (to grid / to object) very much." - Catherine

"I missed color tweens - the ability to change the fill color of an object at different points in time without creating a copy of the shape." - Ivan

"I missed embedded fonts and liked easings." - Dmitry

"I wish that two different objects connected by a line could stay connected even if I moved one of the objects - so the line would be 'glued' to the objects." - Eugene

"It would be very cool to have some green light to demonstrate that sync is ok and all work has been saved - not only that red label that tells you if the sync has failed." - Mike

"I missed some kind of 'snap to grid' or ruler feature when aligning individual letters, and I wish it were easier to create a 'typing' effect, with one letter appearing at a time." - Yuri

After five months of discussions, design revisions, and different ideas - our Basecamp project is approximately a million comments long! - we are excited and proud to unveil Animatron's brand new website. A lot changed between March and now: our first draft of the landing page featured our explainer video.

It wasn't until later that the idea for our Animatron-Hero-as-Scientist materialized. Our designers created the entire front page animation in Animatron, of course.

(Click here to open this project in the Editor). Our Plans section also changed quite a bit, both in terms of design and copy. Here's our initial concept:

And the final version, which provides a lot more information and has explainer microcopy for each item on hover.

Some concepts were pretty solid throughout the design process, though. Our animated icons started out as basic sketches ...

... and evolved into Animatron-created color icons:

Scenes are convenient way to organize your project in time and reduce the number of layers shown in the layers panel. You can think of them like folders on your computer - each scene is a self-contained unit made up of different elements (images, objects, audio, tweens, etc.) that can be moved around in time. Click on the “Scenes” tab next to the Library to open the list of a project’s scenes. The order in which the scenes appear, from top to bottom, is the order in which they appear in the project.

Add a new scene by pressing the + icon. The new scene will be inserted at the bottom of the list, i.e., at the end of the project, by default.

Select a scene and press the Duplicate icon to create a copy of it. Copying scenes is a handy way to preserve some elements when you move from one scene to the next - for example, background images or objects. The duplicated scene will appear directly underneath the original.

Scenes are named “Scene 1,” “Scene 2,” etc. (in order of their creation) by default, but you can rename them by double-clicking on them in the Scenes list or in the Inspector Panel of a selected scene. To change the order in which the scenes play, select a scene and drag it up and down the list. Delete a scene by selecting it and pressing the trash can icon.

You can also add interactivity to a scene by clicking on the scroll icon in the Inspector Panel ...

... and set the duration of the scene. This last one is particularly important! Your scenes will naturally follow each other throughout the course of your project, but you have to set how long they will play for. Each scene will only play for as long as its duration is set, which means that if the scene in the above example is ten seconds long, it will still only be playing for .05 seconds. You can decrease and increase the duration of a scene by clicking and dragging the underlined field left and right (protip: all underlined fields in Animatron can be changed in this way), or by entering a value manually. The duration of a scene is visually represented on the timeline by a red line at the endpoint.

In addition to changing the value in a scene’s Inspector Panel, you can drag the knob at the top of the red line along the timeline to change the duration of the scene.

Game of Thrones can be confusing ...

If you drink more Game of Thrones wine, the show suddenly makes more sense. http://t.co/NBAYLoLBKH

— Kay Steiger (@kaysteiger) July 8, 2014

... so check out this explainer infographic by eeelya about what's going on.

There are a few different ways you can work with our Zoom Tool: First, the most basic - select the Zoom In or Zoom Out Tool from the toolbar and click on the canvas to zoom in steps, like this: