Just in Time for Halloween …

We have some new additions to our Shapes tool, specially created for the scariest day of the year!

Just select the tool from the sidebar, pick a vector shape, and click and drag to draw it on the canvas.

Our Hero tool, which usually draws an animated bouncing Animatron Hero, also has some new additions for the season: a vampiric version of the original Hero, a bat flapping its wings, a friendly spider, and an animated greeting for the season.

In the spirit of Halloween, we’ve also added some new front page animations to our website - take a look (hint: refresh the page a few times to see all three).

-Happy Halloween from Animatron!

We’re Looking for Beta Testers for Our New Video Import Feature

Over the past few months, more and more users have been requesting a new feature: the ability to import video files into their project and a) add animation on top of it, plus b) animate the video itself on the canvas. We’re excited to announce that it’s (almost) here!

By almost, I mean that the functionality is ready, but there’s a lot of testing needed before it’s ready for prime time. For now, Pro users can import small video files (up to 50Mb) and we’ll soon be opening beta testing (with an increased file size limit) to interested users.

If you’re interested in being on the beta list, drop us a note at Full-featured video import will be available by the end of the year!

-Catherine Arizan, Marketing Manager

2 Design Conferences - and 2 More Coming Up

We’ve attended a few conferences over the past few months; first we gave a talk at the Graphical Web Conference in Winchester, UK, followed by Reasons to be Creative in Brighton UK and SmashingConf in Freiburg, Germany. Talking to so many potential users was great for us - we learned a lot about our target audience’s needs and wish-to-haves. Two things really jumped out at us, looking back:

Lots of people were interested in using Animatron in an educational capacity. Quite a few bemoaned the fact that they had to include Adobe Flash in their curriculums, despite thinking it’s completely outdated, because no authoring tools for HTML5 animation exist. They were excited to see that Animatron existed and asked about educational discounts, group / class accounts, and available tutorials.

We do offer student and educational discounts on a case-by-case basis at the moment (email We aim to have group accounts available by early January, and we do have plenty of tutorials available - and in the next few days, we’ll be adding a suggested 8-week curriculum to our website that instructors can use to teach Animatron!

Secondly, visitors to our stand often asked to see examples of a project’s exported HTML5 and SVG code. We’ll be doing an upcoming blog post dedicated to the topic, but in the meantime you can open this simple project and export to HTML5 or animated SVG from the main menu to take a look.

People everywhere wanted the ability to add interactive events to their animations - click to open a link, mouse hover triggering some animation, or clicking from one scene to another, for example. We’ve had the ability to add interactivity for a while, but we recently took it out of commission to rehaul the API and make it a more user-friendly feature. We’re fine-tuning and testing the new version now, it’ll be back within the next month.

We’ll be attending two more conferences in November - the Future of Web Design conference in New York City on November 3rd - 5th as well as the HTML5 Communications Summit in San Jose, CA on November 18th and 19th - so if you’re at either of these events, come by and say hello!

-Catherine Arizan, Marketing Manager

New Blog Framework

As you may have noticed our blog appearance has been changed recently. We switched from Tumblr to self-hosting using Octopress.

There are several reasons:

  • we have full control over the styling of the blog
  • we have full control over when and where we load various resources, i.e. we can delay loading of stuff until people scroll down
  • we can see how the post will look like before we publish it
  • it’s way cooler than tumblr :)

Initially we thought of adding some kind of header animation to the blog and asked our awesome Shmuel to come up with something, but eventually we decided not to put it here, mostly because we wanted to start with the content. The animation Shmuel created is super cool, so I just want to share it:

by Dmitry Skavish

#1 on Hacker News!

Animatron was #1 on the front page of Hacker News today! Coming soon: a blog post that looks at what kind of traffic, conversions rates, and feedback we got from the HN community …

Introducing New Fonts and Kinetic Typography!

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!

You can open it in the Editor and play around with it here.

Text effects are in their infancy, but we’ll be adding tons more effects really soon. If there’s something specific you’d like to see, let us know at!

  • Catherine Arizan, Marketing Manager

Space Man Project

Space Man” by Shmuel Landesman.

This project is a great example of our “Take a Picture” feature - when you import an image / SVG / audio file, the import dialogue box also gives you the option to take a photo with your computer’s camera and place that photo directly on the canvas. Open up Shmuel’s project here and try it out with your own pic!

The Graphical Web Conference

Last week, Dmitry and I gave a presentation on our new animated text feature at the Graphical Web Conference in Winchester, UK (you can read the abstract here and download the presentation slides here). It went really well, the audience was very receptive and had some great questions at the end!

We took the opportunity to attend a few of the other conference presentations - the W3C Standards and Implementors Panel on the last day was especially interesting, it was great to hear about what’s up and coming in browsers. Some things we learned:

  • 2D HTML canvas is already hardware-accelerated in most browsers, and in the ones it’s not, it will be soon.
  • 2D canvas (not just webgl) is high priority.
  • SVG + SMIL is IE’s to-do list, but it’s not top-priority.
  • SVG in general on the rise big time; everybody’s talking about it.
  • Text on canvas is low priority, they advised us to use layouting in DOM and then to use the metrics on canvas (which we already do in Animatron).

Overall, the Graphical Web Conference was fun and informative, and we hope to present again at next year’s conference in Pittsburg, USA.

- Catherine Arizan, Marketing Manager