Skip to main content

Style Property

Style property is object that defines the look of the element which contains the property. For example, style property can define text color, shape color, font size, font family, etc. Style property can also define element's width and height and position.

All elements have multiple available style properties. Some of them are same across multiple element types, while some are unique to certain types. For example, all elements have x and y style properties, which define position of the element. On the other hand, fontFamily style property is only contained by Text Element.

The list of all supported style properties for each element are listed on All properties page.

Since style property is object, it has it's own properties and methods.

Most important property is the one with the value key, which contains the value for the selected property. For example, if you want to set element's height to be 500 pixels high, you will change height property's value to be 500. Loopic will then automatically update the animation with the latest property changes (it will automatically call compute() method of the property and refreshRender method of the parent Composition object).

Properties​

value​

Value of the style property. Type depends on the type of the style property.

unit Read-Only​

  • Type: undefined | "px" | "%" | "deg" | "color"

Unit of the style property value.

keyframes​

  • Type: Keyframe[]

Keyframes used for style property animation.

Methods​

compute()​

Method calculates animation style based on style property value and keyframes.

Action example
textElement.style.width.compute();

getValueAtFrame(frame)​

  • frame Number
  • Returns value
Action example
textElement.style.width.getValueAtFrame(10);