Sencha Inc. | HTML5 Apps

Sencha Animator Create Rich CSS3 Animations with Ease

Download Buy Now »

Release Date: June 11, 2013

Version 1.5

New Features

Custom Fonts

Import your own custom font-face fonts or use our Google Web Font integration to add and use new fonts with your projects. A new typography panel makes it easy to manage external fonts and font-families and to easily include Google Web Fonts.

Multiple Timelines

Scenes can now contain more than one timeline. Objects have their base state shared across timelines and keyframes are unique to the each timeline. This means that objects can have multiple animations associated with them which is very useful when creating interactive animations and to avoid duplicating the same objects across different scenes, making projects easier to maintain and resulting in smaller export files.


Symbols are encapsulated objects that have their own timelines and run independently of the main timeline. They are managed in the new symbol library and can be edited in isolation mode. Multiple instances of the same symbol can be included on the stage, and they will all update if the symbol is updated. Symbols are useful for working with interactive projects since their timelines can play independently of the main timeline. They also make it simpler to manage projects where there are several instances of the same object.

Flexible Layouts

The flexible layout is a new layout type that defines the minimum dimensions for the project (and optionally the maximum dimensions). When exported, the project will fill up all available space, making it simple to create full-page animations. Objects have also received a new anchor property where objects can be anchored to the corners and centers of the the animation, so that they will keep their appropriate placement when the projects are resized to fill the available space.

IE10 Support

Animator can now export CSS without any prefixes, which will run in IE10 and any modern browser that supports prefix-less CSS3 3D Animations.

Sencha Touch Export

When using the “Export for Embedding” a sample Sencha Touch project will be exported with Sencha Touch Animator SDK included. This allows for easy inclusion of Sencha Animator projects within a Sencha Touch app.

Splash Screen

Animator displays a startup splash screen with easy access to recent projects as well as sample projects.


Keyframes can now be set to use the steps easing functions which makes it possible to use sprites to create frame-by-frame animations and other step-based animations.

Inline Text Editor

By clicking on the new text icon at any stage object, the inline editor will be brought up for much easier text editing with live preview.



Exporting for Embedding has been significantly improved. As mentioned above, it will now export to Sencha Touch. The existing SDK for embedding and managing exported projects have been overhauled. It nows comes with a documented and more useful API including new callbacks making it easier to embed projects they way you want and with more flexibility. The default export SDK can now be overridden per project allowing tweaking and adjustment that before had to manually be done on every export. There are also new mobile export options to help create mobile friendly pages directly from Animator.


Performance has been significantly improved, in particular for exporting and when working on big projects. Some projects have seen over a 10x improvement in export times.

Code Editor/ Actions and Custom JS

The code editor can now be moved and resized. It also has a new sidebar with code snippets to make coding easier. It has also gotten improved autocompletion. Both scenes and timelines have received two new actions, init and exit, that are called before animation start and when timeline or scene is exited regardless of if the animation has finished or not, to make it easier to add logic and useful actions to your projects.


  • Updated Scene Panel UI to be faster and support timelines.
  • New project dialog has been updated.
  • Shortcuts: Drag handle to move stage (D). Add keyframe at playhead (Cmd/Ctrl-K).
  • Type/Font can be set for the whole project.
  • Background properties can be set for the project.
  • HTML content can be put in the content field for objects.
  • Project properties has been reorganized into Project and Export tabs.
  • Circle/Oval tool has been renamed to Rounded Rectangle tool.
  • Animator checks https connection as well as http when doing user authentication.
  • More accurate previewing (compared to export).

Bug Fixes

  • Fixed issue when working with projects on Windows network shares.
  • Fixed edge cases when interacting with Object Tree.
  • Fixed several UI bugs.
  • Fixed issue where timeline clock could display wrong time in certain cases.
  • Fixed issue where navigation buttons could be locked up in certain cases.
  • Fixed navigation shortcuts.
  • Fixed issue where selection and hover state could get stuck when rearranging objects.
  • Fixed unintended scene deletion issue.
  • Export SDK now makes sure end wait timer is cancelled on scene jump if applicable.
  • Fixed issue where marquee selecting symbols instance on stage, could select multiple instances several times.
  • Fixed issue when using eye icon to hide objects caused unexpected results.

Known Issues

  • Ellipse gradient doesn’t render accurately within Animator.
  • Exported iBook widgets may not render SVG and custom fonts, depending on where they are run.
    • Mac only: Edit -> Start Dictation is currently not supported.
    • Windows Animator contains Untitled in the title bar and task bar until you save the project.

Installing the Ubuntu Software Download

After downloading Ubuntu (Animator)[], make the downloaded run file executable to install the software:

  1. Navigate to the Downloads folder.
  2. Right-click the SenchaAnimator downloaded run file and click Properties.
  3. Click the Permissions tab, and click Execute: Allow executing file as program.
  4. Click Close.
  5. Double-click the SenchaAnimator run file to install the software.