Animator 1.3 Sencha Docs

Properties Panel Overview

The bulk of the Animator Reference describes how to use the Properties Panel, since the vast majority of Animator controls are located there. A few general points about using the Properties Panel:

  • Objects in Animator are HTML <div> elements, and the Properties Panel is used to control their appearance and behavior.
  • The Properties Panel contains three main sets of controls: Scenes, objects, and keyframes each have their own properties.
  • Use the Base State/Keyframe State toggle at the upper right of the panel to switch between a selected object's base properties and keyframe properties at the time where the playhead sits on the timeline. When keyframe properties are visible, additional controls appear that let you create a new keyframe or select the next or previous keyframe in the timeline.
  • Scene properties define the overall appearance/behavior of scenes. Select a scene to expose Scene properties.
  • Object properties determine the base state of the <div> element. Select an object to expose Object properties.
  • Keyframe properties determine changes to the <div> that occur at specific points in time during the animation. Keyframes are set by selecting an object in the Object Tree and double-clicking in the Timeline. Select a keyframe to expose Keyframe properties.
  • Open disclosure triangles to the left side of property titles to expose all controls
  • Narrow vertical bars to the left of property name can be clicked to enable or disable the property. Setting a property automatically enables it and the vertical bar lights up (bar turns from gray to bright blue or purple). Click vertical bar to disable property, turning off bar (bar turns from bright blue or purple to gray), and click again to enable, relighting vertical bar.
  • Fields with numerical values can be edited by clicking the field and dragging up to increase the value or down to decrease it.
  • Hide the Properties Panel and expand the Timeline and the Stage by clicking the double arrow in the upper left corner of the panel; when the Properties Panel is hidden, click the double arrow in the upper right corner of the Animator window to show it again.
  • Properties in Animator mimic CSS properties; for example the White Space control in Type properties is used to set the white-space CSS property and has the same values. For details about each CSS property, we recommend using a external CSS reference (such as W3Schools CSS Reference).

Properties Panel reference organization

The Animator Reference contains three main sections describing how to set properties:

  • Scene Properties: Properties of a scene.
  • Object Properties: Properties of the base state of an object.
  • Keyframe Properties: Properties of object transitions.

Object and Keyframe properties are further subdivided according to the main areas in the Properties Panel, as follows: