Skip to main content

Composition API

The composition represents exported Loopic composition with all its properties. It should not be mixed with the Composition Element, which represents the composition element as the element of the layer.

There can be multiple Composition elements in one template, but there must be at least one which is considered as main. The main Composition object is the object that contains all other objects and the one that is responsible for the playback of the template. play or stop commands sent to the template will first be read by the loopic object, and then those commands, after going through all middlewares, will end up by calling play or stop commands (in case if the default middleware was not omitted by custom middleware).

Composition diagram

Properties​

id Read-Only​

  • Type: string

ID of the composition.

domNode Read-Only​

  • Type: HTML DOM element

Reference to DOM element representing composition.

duration​

  • Type: number

Duration of the composition in frames.

activeFrame Read-Only​

  • Type: number

Frame that is currently active.

fps​

  • Type: number

Composition framerate setting (eg. 50, 60).

outroFrame​

  • Type: number

Number of the frame which will be used as outro frame.

startFrame​

  • Type: number

Frame from which the composition playback should start from. Defined by the workspace duration in Loopic.

info

In the current version of Loopic, startFrame property is always 0 because workspace duration can not be shifted in time.

isPlaying Read-Only​

  • Type: boolean

Flag signalizing if the composition is playing.

isComputed Read-Only​

  • Type: boolean

Flag signalizing if all properties contained by all elements used in the composition (and including all nested compositions as well) are computed, which means those changes will be visible in the animation.

isVisible Read-Only​

  • Type: boolean

Indicates whether the composition is currently visible during playback. It reflects the composition's playback state:

  • false - Composition is mounted but play hasn't been called yet
  • true - Composition was played, and the playhead is positioned within the defined workspace duration
  • false - The playhead has moved past the composition's end frame (animation has finished)

Should not be mixed with layer's isVisible property.

Methods​

findElementByKey(key)​

  • key String
  • Returns Element object or undefined

Finds Loopic element with the specified key argument.

Returns Loopic element object.

Action example
composition.findElementByKey("_name");

play(arg)​

  • arg Object (optional)
    • reverse boolean (optional) - whether to play the animation in reverse

Plays the template from current active frame.

Action example
composition.play();

pause()​

Pauses the template playback.

Action example
composition.pause();

goTo(frame)​

  • frame number

Sets current active composition frame to the frame argument.

Action example
composition.goTo(10);

goToAndPlay(frame[, arg])​

  • frame number
  • arg Object (optional)
    • reverse boolean (optional) - whether to play the animation in reverse

Sets current active composition frame to the frame argument and plays the composition.

Action example
composition.goToAndPlay(10);

compute()​

Computes animations of all properties of all elements contained in composition (including all nested compositions and their elements as well). If composition is paused, the result of computation won't be visible in the current frame unless refreshRender() method is called.

Action example
composition.compute();

refreshRender()​

Refreshes the render with all latest animation computations. This method will refresh the render of only the composition on which this method is called and will not refresh nested compositions.

Action example
composition.refreshRender();

executeCompositionAction()​

Executes composition action. By default, this method will be called automatically just before composition is played for the first time.

Action example
composition.executeCompositionAction();

executeFrameActions()​

Executes frame actions on the current active frame.

Action example
composition.executeFrameActions();