Backstage News Partners Videos

Animatron: HTML5 Animation Editor Inspired by Middle-School Homework Assignment

This guest post is by Dmitry Skavish, Co-Founder and CEO of Animatron. 

A couple of years ago, JetBrains helped us start our company, Animatron, with the goal of building a visual HTML5 animation editor that allows you to create mobile-friendly interactive and animated content in your browser.

Animatron began with a middle-school homework assignment. I was surprised to see the quality of the online animation programs my daughter’s teacher recommended—some ad-cluttered nightmares that created animated GIFs and that’s about it. I did some research, trying to find a better tool, and realized that it simply didn’t exist: there was no powerful and user-friendly animation tool on the Internet! And so the idea for Animatron was born.

A few years and 15 employees later, we released our first version and were pleasantly surprised to receive very positive feedback from many people all over the world!

Since most of this blog’s readers are JetBrains fans, I’m going to talk about the technical side of the company: how we build the product, and what tools and technologies we use.


When you start Animatron, you see only the client—the animation editor in the browser. This is the largest component of what we do, but of course the whole web application is much bigger than that. Here is a bird’s eye view of Animatron:

Animatron Topology

Let me walk you through all the components and describe each of them.

First, there is the Editor at The editor is an application written in Java and then translated to JavaScript via Google Web Toolkit. The app is around 800 KB of gzipped js code that is stored in Amazon CDN. When you go to, the whole app is loaded directly from CDN (Content Delivery Network). Packaging it this way allows us to minimize start up time for all geo locations.

The app communicates with API and Backend servers. API servers are stateless nodes that   are used for authentication, managing users, projects, payments, etc. Backend servers control project content and provide collaborative editing of projects by many concurrent users.

In the middle we have a PostgreSQL database which holds all the Meta data of projects and users. We switched from MongoDB to PostgreSQL when we realized that most of our data is relational.

The API node is a server application employing Spray framework—it’s written in Scala.

The Backend server is an app running under Tomcat and is a mix of Java and Scala code.

API and Backends are visible to the outside world and client code talks directly to them. Behind a firewall, we also have renderers and search nodes.

Renderers create all kinds of media from users’ projects: preview images, gifs and videos. We use PhantomJS to run our projects and render images.

Of course we have a website which displays users’ projects and provides some social interactivity to users. The website is a Scala application running on Play framework.

And last but not least: the Animatron Player. This is a Javascript app and library that plays projects created by the editor on browser’s canvas using a bunch of other HTML5 technologies.

Matt EllisGeek Stats about the Animatron team:
* There are 15 full-time employees at Animatron
* Developers  – 12, QA – 2, Marketing – 1
* On Mac – 8, Windows – 4, Linux – 3
* Ukrainian – 7, Russian – 6, Slovak – 1, American – 1
* Living in: USA – 7, Germany – 2, Ukraine – 5, Russia – 1


We have 3 repositories on GitHub. One is for the Player; it’s public and open source. I welcome everyone to contribute!

The other two are private repos: one for all server side code and another mostly for the editor. Here are the language statistics for those two repos:



GitHub is also our main code review tool. Devs create Pull Requests from their branches to our Develop branch. The PR is reviewed and if everything is okay, it is merged to Develop.

Being a Java/Scala/Javascript company, we of course use the best IDE ever. I’m pretty sure I don’t have to name it here 🙂

For bug tracking we use YouTrack, which is absolutely awesome! In the past we used Jira, PivotalTracker and Trello – they’re all fine … for non-programmers. If you’re a hacker, YouTrack is your best friend! It also helps that we have a free license 🙂

We use TeamCity for continuous integration and it’s incredible; the only thing I miss is the ability to configure web hooks to post notifications etc. to external servers. You can write a plugin, but it’s much more complicated, especially if you don’t host your servers yourself.

We host everything on Amazon and use quite a few Amazon services: EC2, S3, CloudFront, Route 53, Elastic Beanstalk, CloudFormation and SES.

We always have at least two stacks running: Production and Test. Each stack is completely separate from the other; they may have different numbers of nodes and they can be created automatically with different parameters. Each stack consists of at least one web server, backend, API, PostgreSQL, renderer, search, and a bunch of S3 buckets with CDN mapping.

We deploy to the Test stack several times a day and to Production once every 2-4 weeks. New stacks can be created if we need to run load testing or some other experiments.

For team communication we use Google Hangouts and Skype, and just recently we started using Slack, which is a godsend! It’s the best team chat I have ever used and tried. Highly recommended!

Animatron Samples:

Ninja vs Animatron 2


Try Animatron today,

Dmitry SkavishDmitry Skavish is CEO at Animatron. He has been passionate about computer graphics and animation since the days when you needed to punch your game into the machine before you play it. He worked in the software industry for more than 25 years, from hacking VRML browser in C to writing analytic software in Java for a hedge fund. He worked at JetBrains for several years on Fabrique, a project that never got finished. Last decade he had been trying to start his own venture (with mixed results). Animatron is his latest baby.
Comments below can no longer be edited.

8 Responses to Animatron: HTML5 Animation Editor Inspired by Middle-School Homework Assignment

  1. Avatar

    Jan Peiro says:

    April 18, 2014

    Wow! Awesome tool!
    Im wondering.. kind of trying to find the code where the animation takes place.. is that closed off or can someone take it and look at it?
    take care, I appreciate your work, its awesome!

  2. Avatar

    dmitry skavish says:

    May 1, 2014

    hey Jan,

    sorry for late reply, I just noticed your comment. the animation is being played by javascript player It’s an open sourced library developed by us. it playes projects encoded in json.

    we also plan to export to animated svgs as well.

  3. Avatar

    dmitry skavish says:

    August 27, 2014

    Roman, here is our blog

  4. Avatar

    Sevis Vanta says:

    September 8, 2014

    How can I be sure my animation projects will be available to me in the future? If I create animation with animatron, and then animatron (God forbid) goes away or is sold off to some other company and becomes a for-pay application, will my animation projects (not the rendered output, but the project files themselves) be usable in any other application, like Synfig Studio or something?

  5. Avatar

    dmitry skavish says:

    September 9, 2014


    I understand your concern. In fact it’s pretty typical for online service, especially when there is no clear standard on how to store this kind of data.

    We plan to release a standalone app at some point, that is basically our webapp packaged as native one. You could use it completely offline or even without our service at all. I cannot say when we will do that, but it’s definitely on our to do list.

  6. Avatar

    Dragos says:

    December 31, 2014

    You guys rock! Many thanks for your hard work.

  7. Avatar

    architekt says:

    May 13, 2015

    Yes, animatron is powerfull and now have nice price… is possible to include dialog/interactive ?

    • Robert Demmer

      Robert Demmer says:

      May 14, 2015

      Interactivity is coming at the beginning of June.

Discover more