Animator 1.5 Sencha Docs

Animator Release Notes

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.

Version 1.3

Here is a comprehensive list of changes made to Animator in the version 1.3 release.

New Features

The following are new features and feature enhancements, listed by functional area.

Timeline and keyframes

  • Better looking, more usable Timeline with a compact design to show more animation tracks in the same screen real estate.
  • Keyframes can be dragged and snap to neighboring keyframes automatically.
  • Timeline automatically scrolls if a keyframe is dragged beyond the boundaries of currently visible segment.
  • When adding a keyframe in between an existing pair of keyframes, Animator automatically interpolates the values of properties to give the new keyframe.
  • Multiple keyframes can be selected with Shift-Click or with a marquee selection. They can then be moved, scaled proportionally, copied, and pasted.
  • Clock just below Object Tree precisely displays the playhead's position.
  • Keyframes can be added individually in an empty animation track. You no longer need to add keyframes by couples when starting to create a new animation.
  • More visible keyframe and timeline selection states. See Object Selection States
  • Timeline can be navigated with the keyboard. See Keyboard Shortcuts
  • Shift-click in the time header selects all keyframes from current time to new time.
  • New keyframes inherit from base state when possible instead of using default values.
  • With Recording mode on, create keyframes at the playhead position by manipulating object in the Stage

Object Tree and objects

  • Object Tree can be scrolled with the mouse.
  • Multiple objects in the Object Tree can be nested at the same time via drag and drop.
  • The base state of an object is now more accessible and easier to edit using the Base State/Keyframe State toggle or the Base Object diamond icon to the right of an object name in the Object Tree.
  • CSS ID base state object property has been changed to ID.
  • Can assign CSS Class property to objects.

Export and preview

  • New export to iBooks widget format.
  • Multiple animations can be exported to run on the same page (sandboxing).
  • "Go to previous scene" added to the Animator JavaScript API that controls animations.
  • Can jump to individual scenes by name in the Animator JavaScript API.
  • Can preview individual scenes in the browser.
  • Embedding without using iframe is easier.
  • Hidden objects stay hidden in preview.
  • Can add JavaScript interactivity before the start of a scene, at the end of a scene, or during an iteration. -setTimeout is used in exported animations to create more precise starting point.
  • Various improvements to CSS export.

Stage, code editor, scenes, and Library Panel

  • Can attach an image to a scene's background and set its repeat property.
  • Select library items individually to export them, or select none to export all library items.
  • In Stage, scale and resize controls are available at the same time.
  • Android-safe mode has been added that removes all features that don't work correctly on Android devices.
  • New Assets are in Library Panel shows all assets used in the current project and lets you replace or update them individually.
  • Code editor has autocompletion for Animator specific functions and MRAID/ORMMA APIs. Can also add custom autocomplete libraries for custom APIs.
  • Can edit head's content in the integrated code editor.
  • Can copy an object's animation to CSS directly, which is useful for interaction design.
  • Can insert iframe to projects.
  • Can control perspective-origin for scenes.
  • Add images to a project without saving.


  • General UI fit and finish improvements, improved UX.
  • Check for application updates without quitting and relaunching.
  • Close and open property group disclosure triangles by placing cursor over property group header (such as General, Actions, Dimensions) and using Alt-click key combination.
  • Remembers window size and location from last session.
  • Automatic restart after an update is complete.
  • New Open Recent item in Edit menu.
  • Save As/Export copies all assets in the Asset folder
  • In custom JavaScript actions data can be stored on this object and is available in all custom JavaScript calls.
  • Reauthorize or login with different account.

Bug Fixes

The following bugs have been fixed.

  • Export no longer slows down when exporting multiple times.
  • Keyframes select correctly in Timeline.
  • Auto update works if user is not logged in.
  • Error message no longer appears when hidden objects are reordered.
  • Clicking on scrollbar no longer jumps to a different time.
  • Code editor does not show error when return statement is used.
  • Add keyframe at playhead works with object layer selection.
  • Removing/re-adding keyframes by undo/redo no longer causes animation to show up at time 0.
  • Adding object from pasteboard by drag/drop does considers drop position.
  • Deleted objects that have been readded with Undo can be deleted.
  • Changing scenes if scene ends after last keyframe now works in Firefox.
  • Deleting last keyframe does not leave it selected.
  • Deleting second-level (or higher) object no longer puts application in a potentially unstable state.
  • Images now display if there is a question mark in URL.
  • Radial gradient on object no longer enables scene gradient on start.
  • Radial gradient in certain configurations does not cause a crash.
  • Adding objects to pasteboard in object layer mode does not cause unexpected results.
  • Double clicking to drill down into objects no longer goes straight to base state when in layer mode.
  • Object pasteboard considers children dimension when previewing.
  • Deleting object quickly while entering in name edit mode does not cause an error.
  • Operations on hidden objects do not put Animator in an unstable state.
  • Stage does not scroll unexpectedly when blurring some config fields.
  • When toggling the active states of the borders using the combined property, can now undo state changes to all four borders at the same time