Sencha Animator Released: A Revolution in Mobile Animation

Sencha Animator Released: A Revolution in Mobile Animation

h3. Introducing Sencha Animator 1.0

We spent the last few months working very hard (and very quietly) to bring you a product that we think will redefine the creation of animations on mobile devices. And now it’s here: today we’re very proud to announce the first release of Sencha Animator.

View Sencha Animator CSS3 Demos Download Sencha Animator

h3. What is Sencha Animator?

Sencha Animator is a desktop application that enables interactive designers to easily create rich media animations based on web standards for modern mobile devices. Until recently, rich media advertising on the desktop web has been enabled by the Flash plugin. But with no Flash support on iOS, interactive designers have been looking for a way to bring animations and rich interactivity to mobile devices without hand-coding hundreds, if not thousands of lines of JavaScript, CSS3, Canvas, or native code.

Museum of Science demo advertisement

Museum of Science demo advert, tailored for iPad dimensions

Last year, we looked at the various techniques for mobile animation and decided to focus initially on CSS3 Animations. Animations built with CSS3 have a considerable advantage over any other mobile animation technique: they look, feel, and run beautifully. And on most mobile browsers CSS3 is hardware accelerated, so it consumes very little CPU power while running at high framerates. In addition, since CSS3 Animations are just styling, browsers that don’t support them can still fall back to viewing un-animated content.

For these reason, we decided to start out using CSS3 animations. We try to be as faithful as possible to the underlying technology in Animator. We’re giving designers a simpler way to build animations while making the output friendly to hand-editing and further extension.

View Museum of Science Demo video

The road to CSS3 animations

During the last year, the Animator team at Sencha has worked to bring an innovative technology in a familiar working experience to interactive designers and creative agencies. Those of you who followed the evolution of Sencha Animator will appreciate how much we’ve refined your working experience.

Every area of the product has been honed and perfected with community feedback and a fantastic group of professional designers and user experience experts contributed to the creation of a user interface that is both easy to use, yet extremely powerful.

And while the first release of Sencha Animator produces WebKit compatible animations, but now that CSS Animations are also part of Firefox, Opera and IE10, we’ll be adding support for those browsers in time as well.

Each design decision has been made with a conscious effort to help designers be as productive as possible, as quickly as possible. So let’s go over the major features of Sencha Animator 1.0:

Sleek Dark UI

h4. A UI that gets out of your way

The Sencha Animator interface is designed using dark tones to let designers concentrate on what really matters — their own creative work — while the tool chrome fades into the background. Key actions in the UI are highlighted with accent blues to guide designers to available actions.

On top of the visual design, Animator focuses on productivity. To make it easier to work on small screens, almost every panel is collapsible so you can maximize the canvas area. Keyboard jockeys can use the arrow keys to nudge objects. Smart guides are triggered when moving objects on the canvas to help align things properly on the fly. To make it easier to see the results of edits, properties in the Property panel feature “drag to edit” and keyboard increments/decrements so designers can adjust properties to exactly the effect they want.

h4. Intuitive timeline, multiple scene support

The timeline is the heart of any animation: it’s here where you can take a static object and bring your artwork to life. For each object on the stage, the animation track shows its visibility, the presence of keyed animations and their timing. The track is easily editable with the mouse, and can be finely customized by using one of our pre-set easing curves or with the powerful custom easing tool.

Every object, and object group, can be locked and hidden to facilitate tweaking of individual elements, and a simple but effective “scene end” marker lets you define the length of each scene.

Animator supports complex nested objects, but it’s easy to tell if anything is happening inside a collapsed nested group at a glance by using the nested animation indicator.

Nested timeline collapsed

Nested Timeline Expanded

For bigger and interactive projects, putting everything in a single timeline can become confusing and hard to manage. The Scene system allows you to split your projects into several scenes keeping the timeline free from clutter and your project better organized.

By default, when a scene is finished, the animation will go to the next scene, however this can be customized in different ways (more on this later). Scenes can even be previewed by hovering on its thumbnail, making it easy to find the right one to edit.

Multiple scenes at your fingertips

h4. Object Library

Animator also offers an Object Library that lets you save your objects for later reuse in the same project, and for use in a different project via export. This new feature facilitates the creation of multiple animations using the same branded elements (logos, buttons, etc) and simplifies the job of maintaining a consistent look and feel across multiple projects and collaborators.

Object Library

h4. Templates

In studios and agencies, interactive designers often find themselves working on multiple projects for the same client, or building multiple creatives for the same device. Animator makes this easy for designers, letting you save a project as a template, then start a new project from that template. Templates are simple Animator files that can easily be shared with colleagues and collaborators and used as a consistent starting point for projects.

h4. Advanced interactivity and output options

This is the piece interactive designers are going to love the most: Animator lets you use JavaScript almost everywhere. You can add JavaScript to objects, to scenes or in the head of the exported HTML + CSS output. In a scene’s properties for example, you have the ability to add interaction at the scene’s start, at the end and on mouse/touch move. There’s a choice of pre-packaged interactions like opening a URL in the same window, skipping to another scene, or adding your own JavaScript. In addition to this, Animator output is intentionally highly human readable.

You can also choose to minify your export, or to activate ORMMA support. Designers unfamiliar with web technologies have direct access to the exported code, so they can easily understand how their creations work under the hood, while advanced users have complete control over the output, giving them the freedom to push the envelope. And pushing the envelope is not an expression we’re using lightly here. Just take a look at the demo that our beta tester agency created with Animator:

KickFu game demo

KickFu game demo, made with Sencha Animator by View video of demo

When we saw this for the first time, the offices at Sencha were speechless with what a skilled designer can do with Sencha Animator, and we hope you will be too.

h4. ORMMA Support

Animations are a key part of any interactive brand campaign, and Sencha Animator makes it incredibly easy to build advertising assets. Animator produces creatives that are compatible with any mobile ad network that can serve rich media ads. This is thanks to our support for an up-and-coming standard called ORMMA (Open Rich Media Mobile Advertising). All major mobile networks support it, and it eliminates the need to code an ad for a specific network, and reduces re-work that’s often required to run campaigns on multiple systems and apps.

ORMMA logo

With Sencha Animator, designers don’t have to develop for the lowest common denominator anymore, but build experiences that are designed to work on different devices, ad networks and delivery methods.

Go ahead, amaze us

As you can probably tell, we’re incredibly excited to release Sencha Animator, but we didn’t do it alone: we had the help and support of an incredible group of artists and developers from various backgrounds that were so gracious to help us test the product and helped us fine tune it. A special thanks goes to the many people that have contributed their critiques, suggestions and guidance to Animator. We should also note here that we built Sencha Animator itself using Ext JS wrapped with native packaging: this has allowed us to simultaneously ship versions for Mac, Windows and Linux.

Sencha Animator icon

We can’t wait to see what all of you will be able to do with Animator, and we are excited that you will surpass our wildest expectations. Go ahead, download the trial and we look forward to being amazed.

h3. Pricing and availability

Sencha Animator is available today at $199 from the Sencha Store. Discount packs are also available.


  1. NewDesigner says

    How does providing a service that requires resources (thus resources in return when used) a way of killing the spirit of HTML5?

  2. Martialen says

    @New Designer.

    They just moved from providing a service to selling a product. There’s plenty of open-source software out there that take resources and manhours to create, but that doesn’t mean they must come at a cost to the user. Beneath Sencha Animator are HTML5, CSS, and Javascript – technologies that are freely manipulable and accessible to all web developers. I guess I’d hoped Sencha would follow the business model used for Sencha Touch where only commercial operations need purchase a license. That makes sense.

  3. John doe says

    I find it curious that demos are *never* shown running on an actual device, but always on some I/pad/phone simulator.
    Curious. Nay, suspicious even!

    Of course things will run smooth on the simulator.

  4. says

    John – I’m not sure if you’re serious or trolling. In the former case – shows an animation running on a physical iPad – you can even see the carpet underneath it.

    (But it also doesn’t look very professional, so our standard practice is to screen-capture the other demos running on a simulator because they look better produced. )

  5. jax says

    He’s probably trolling but does have a point. To be honest I think the demo running on the actual ipad is more convincing. :-)

  6. Arnie Keller says

    Just a point of clarification, please:

    Does the javascript mean that the animations will run on browsers that don’t support css3 ( as do Hype or Edge)?


  7. says

    @martialen – you’re not quite right on needing to pay for a Sencha Touch license for commercial use. Our Sencha Touch commercial license is free. The only exclusion is that if you want to ship your OWN SDK or application builder embedding Sencha Touch, then you need to get an OEM license from us.

  8. says

    The Sencha Animator presentation at SenchaCon 2011 was brilliant. I am hooked. It seems completely intuitive and quick to use. It opens up so many possibilities…

Leave a Reply

Your email address will not be published. Required fields are marked *