Sencha Inc. | HTML5 Apps


Sencha Animator Beta 1

May 12, 2011 | Arne Bech

Sencha Animator Beta 1

The Animator team at Sencha is excited to launch Beta 1 of Sencha Animator today. Our first beta incorporates numerous changes and upgrades since the developer preview released a few months back, and we are thrilled to share these new features and improvements with you.

Download Sencha Animator Beta 1 {padding-left:20px;}Watch Sencha Animator Beta 1 Highlights Video

What is Sencha Animator?

Sencha Animator is a desktop application built for the new animation capabilities in CSS3, providing designers and developers with a powerful but easy to use application that allows you to harness CSS3 animations without writing any CSS. Animations created with the tool work in modern WebKit browsers both on desktop and mobile.

A particularly exciting aspect of Sencha Animator is that you can reach users that do not have Adobe Flash, including the entire iOS community, and provide them with smooth, hardware-accelerated animations.

image property panel

Refreshed UI

In Beta 1, the UI has received some significant changes both functionally and visually. Our goal was to make the UI more approachable for visual professionals and easier to use for beginners.

The property panel now provides a tabbed interface with a separate tab for editing keyframe, object and stage properties. This removes a lot of clutter from the property panel and makes it much easier to use.

The update stage enables you to select objects directly, rather than going through the object tree to select different items. The selected object now also have handles to allow resizing directly on the stage.

Take a closer look at the refreshed user interface in our latest Sencha Animator screencast about creating an indefinite loading bar.

h3{clear:both}. New Editors

To further improve the property panel we have created three new editors: a real Color Picker, a Gradient Editor and a Easing Curve Editor. The Color Picker now allows you to select any color, not just a limited set. The Gradient Editor lets you take control of gradients, helping you easily create stunning gradients in an easy drag and drop interface. The Easing Curve Editor lets you visually create and preview custom Bezier easing functions to give your animation just the right feel.

image color picker image gradient editor image easing editor


One of the new features we’re most excited about is our new Scene system. For bigger and interactive projects, having the entire project on one linear timeline gets complicated and often confusing. The new 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 done playing the animation will go to the next scene, however this can be customized to either pause the scene or jump to any scene that you have in your project. Through the property editor you can also add a Click Action to any element which will let the user jump to a different scene by clicking on different elements in the animation.

image of scenes

Customer Feedback

Now that Sencha Animator is in its first beta release, we’re even more interested in hearing your feedback. We would also like to say thank you to all who have given us feedback from the Developer Preview and hope that you find much of your feedback was incorporated in Beta 1. At the moment, animations work best with iOS 4+ and BlackBerry PlayBook, although they will also play on older versions but with reduced performance. Android 3.1 doesn’t fully support the CSS3 animation spec yet, so some animations may not work as well. If you’d like to share feedback on Beta 1, please join us in the Sencha Forum for Sencha Animator.

There are 12 responses. Add yours.

Nico Barten

4 years ago

In which desktop browsers does this already work? FF4? iE9? (guess not)

Andrea Cammarata

4 years ago

Just a word…wow!
Has been developed some great improvements than the last version.
The scene and bezier easing functions editor take Sencha Animator to “the next level”.
Great work!


4 years ago

@Nico what part of it’s for webkit browsers do you not understand? =)  * Helpful hint read the article a bit closer instead of skimming or just trying the tool.

@Sencha awesome work this will make life easier.  From the small testing I did this is a very powerful tool to have.

Thank you for this!!!


4 years ago

A particularly exciting aspect of Sencha Animator is that you can reach users that do not have Adobe Flash, including the entire iOS community, and provide them with smooth, hardware-accelerated animations.

Rodolpho Leal

4 years ago

Just amazing.
I’m already imagining how astonishing will be the next generation of web applications I will develop!
Thanks Sencha!


4 years ago

One thing I noticed is that the text does not seem to anti-alias while it is animated/moving - other than that it seems pretty cool

Dan Boyle

4 years ago

This thing is amazing. It’s gonna make my life a whole lot easier for sure. Sencha rocks!

Alex Benini

4 years ago

Amazing ... but there continues to be the problem of license server…
I am very disappointed!

Aditya Bansod

4 years ago

@Alex—when were you having issues with the license server? We had some server issues recently and that may be the root cause of it.


4 years ago

I am impressed with the animation tool and in a matter of hours had a nice HTML5 animation developed. And I think i is great that it worls in the webkits, but is there no way to get the animations to work in sub-par browsers like IE and Firefox?

Aditya Bansod

4 years ago

@Mike—we’re looking at other options, like JavaScript fallback for non-WebKit browsers but at the moment we’re focused on CSS3 animations. Firefox 5 is supposed to support CSS3 animations, so we’re looking forward to that.


4 years ago

You’re the graetest! JMHO

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.