@rendley/sdk - v1.15.5
    Preparing search index...

    Class LottieClip

    Clip implementation for Lottie animations rendered into a canvas-backed Pixi texture.

    In addition to normal clip timing/styling, this class exposes a property editing surface for text, fills, gradients, and images defined inside the Lottie composition.

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Properties

    animationController id propertyAnimator sprite state style

    Methods

    addClipMask addEffect addFilter clearAllCustomData clone destroy discardProcessing generateNewId getAllCustomData getAnimationData getAnimationPropertyValue getBlendMode getCustomData getDuration getEffectById getEffects getEndTime getFilterById getFilters getGroups getId getInsideTransition getIsProcessing getLayerId getLeftBound getLeftTrim getMasks getMediaId getName getPlaybackSpeed getProperties getProperty getPropertyValue getRightBound getRightTrim getStartTime getSubtitlesId getSubtitlesOffset getTransitionInId getTransitionOutId getTrimmedDuration getType getVisible getWrapMode hasCustomData hasName hasSprite hitTest init isActive isReady moveBy onPause onPlay onRenderDone onRenderStart onResize postRender preload registerEffectProperties registerFilterProperties removeAllEffectsByEffectId removeClipMask removeEffect removeFilter removeSubtitles render replaceAnimationData replaceFillColor replaceGradientFillColor replaceGradientStrokeColor replaceImage replaceStrokeColor replaceStrokeWidth replaceText resetAllAnimationProperties resetAnimationPropertyValue serialize setAllCustomData setAnimationPropertyValue setBlendMode setCustomData setInsideInTransition setInsideOutTransition setLayerId setLeftTrim setName setPlaybackSpeed setProperty setRightTrim setStartTime setSubtitles setSubtitlesId setSubtitlesOffset setTransitionInId setTransitionOutId setVisible setWrapMode unregisterEffectProperties unregisterFilterProperties update updateMediaData updateVisibility deserialize

    Constructors

    Properties

    animationController: AnimationClass
    id: string
    propertyAnimator: PropertyAnimator
    sprite: Sprite
    state: ClipState
    style: ClipStyle

    Methods

    • Uses another clip as a mask source for this clip.

      Parameters

      • clip: Clip

        Clip whose sprite should be used as the mask source.

      • Optionaloptions: MaskOptions

        Optional mask behavior.

      Returns undefined | MaskFilter

      The created mask filter, or undefined if the source clip has no sprite.

    • Removes all custom metadata stored on the clip.

      Returns void

      Nothing.

    • Creates a serialized copy of the clip with a new runtime instance.

      Returns LottieClip

      A cloned clip instance.

    • Releases clip-owned runtime resources, masks, transitions, effects, and cached lookup state.

      Returns void

      Nothing.

    • Cancels or discards any in-progress asynchronous clip work.

      Returns void

      Nothing.

    • Generates a new clip ID and updates dependent runtime objects that store that ID.

      Returns void

      Nothing.

    • Returns a copy of all custom metadata stored on the clip.

      Returns undefined | Map<string, unknown>

      A copied metadata map, or undefined if no custom data has been stored.

    • Returns the raw Lottie animation JSON currently loaded in the runtime animation instance.

      Returns any

      The animation data object, or undefined when the animation is not initialized yet.

    • Parameters

      • property: string

      Returns string | number

    • Returns a stored metadata value for the clip.

      Parameters

      • key: string

        Metadata key to look up.

      Returns unknown

      The stored value, or undefined if the key is not present.

    • Returns the full clip duration before trims are applied.

      Returns number

      The clip duration in seconds.

    • Returns the effects currently attached to the clip.

      Returns Effect[]

      The clip effects.

    • Returns the clip end time in timeline space.

      Returns number

      The clip end time in seconds.

    • Returns the filters currently attached to the clip.

      Returns Filter[]

      The clip filters.

    • Returns the available Lottie property groups.

      Returns { id: string; label: string }[]

      Property groups used to organize editable properties in the UI.

    • Returns the clip ID.

      Returns string

      The clip ID.

    • Indicates whether the clip is currently part of any transition.

      Returns boolean

      true if the clip is inside an incoming or outgoing transition; otherwise false.

    • Indicates whether the clip is still processing asynchronous work.

      Returns boolean

      false in the base implementation. Subclasses override this for clip-specific processing.

    • Returns the ID of the layer that currently owns the clip.

      Returns string

      The owning layer ID.

    • Returns the first visible playback time of the clip after left trim is applied.

      Returns number

      The left playback bound in seconds.

    • Returns the amount trimmed from the left edge of the clip.

      Returns number

      Left trim in seconds.

    • Returns the media asset ID currently bound to the clip.

      Returns undefined | string

      The media asset ID, or undefined for clips without media.

    • Returns the user-visible clip name.

      Returns string

      The clip name.

    • Returns the current Lottie playback speed multiplier.

      Returns number

      Playback speed multiplier.

    • Returns the full property map keyed by property id.

      Returns Map<
          string,
          {
              group?: string;
              id: string;
              label: string;
              path: string;
              type: LottiePropertyTypeEnum;
              value?: unknown;
          },
      >

      Editable Lottie property descriptors.

    • Returns one editable property descriptor by id.

      Parameters

      • propertyId: string

        Property descriptor id.

      Returns
          | undefined
          | {
              group?: string;
              id: string;
              label: string;
              path: string;
              type: LottiePropertyTypeEnum;
              value?: unknown;
          }

      The property descriptor, or undefined if it is not exposed.

    • Reads the current value of an exposed Lottie property, falling back to the live animation state when needed.

      Parameters

      • propertyId: string

        Property descriptor id.

      Returns any

      The resolved property value, or undefined when the property cannot be found.

    • Returns the final visible playback time of the clip after right trim is applied.

      Returns number

      The right playback bound in seconds.

    • Returns the amount trimmed from the right edge of the clip.

      Returns number

      Right trim in seconds.

    • Returns the clip start time in timeline space.

      Returns number

      The clip start time in seconds.

    • Returns the subtitles asset ID currently assigned to the clip.

      Returns undefined | string

      The subtitles asset ID, or undefined if none is assigned.

    • Returns the stored subtitles offset for the clip.

      Returns number

      The subtitles offset in seconds.

    • Returns the incoming transition ID associated with the clip.

      Returns null | string

      The incoming transition ID, or null if none is set.

    • Returns the outgoing transition ID associated with the clip.

      Returns null | string

      The outgoing transition ID, or null if none is set.

    • Returns the playable duration after both trims are applied.

      Returns number

      The trimmed duration in seconds.

    • Returns the clip type identifier.

      Returns string

      The clip type.

    • Indicates whether the clip is marked as visible.

      Returns boolean

      true if the clip is renderable; otherwise false.

    • Indicates whether the clip has a stored metadata value for the provided key.

      Parameters

      • key: string

        Metadata key to test.

      Returns boolean

      true if the key exists; otherwise false.

    • Indicates whether the clip has a non-empty user-visible name.

      Returns boolean

      true if a name is set; otherwise false.

    • Indicates whether the clip exposes a sprite that can be added to the render stage.

      Returns boolean

      true in the base implementation. Sprite-less subclasses can override this.

    • Tests whether a screen-space point falls inside the clip's local bounds.

      Parameters

      • point: { cursorX: number; cursorY: number }

        Screen-space cursor coordinates.

      • OptionalignoreVisibility: boolean

        When true, performs the hit test even if the sprite is not currently visible.

      Returns boolean

      true if the point hits the clip; otherwise false.

    • Attaches the clip to a layer render container and initializes runtime-only resources.

      Parameters

      • layerId: string

        Layer ID that owns this clip.

      Returns Promise<void>

      A promise that resolves after initialization completes.

    • Indicates whether the clip is active on the specified timeline frame.

      Parameters

      • currentTime: number

        Timeline time in seconds.

      Returns boolean

      true if the current frame falls within the clip playback bounds; otherwise false.

    • Indicates whether the clip has enough runtime state to render and update.

      Returns boolean

      true when the clip is idle or loaded; otherwise false.

    • Moves the clip forward or backward on the timeline by the provided offset.

      Parameters

      • amount: number

        Time delta in seconds.

      Returns void

      Nothing.

    • Parameters

      • currentTime: number

      Returns Promise<void>

    • Parameters

      • currentTime: number

      Returns Promise<void>

    • Parameters

      • canceled: boolean

      Returns Promise<void>

    • Parameters

      • width: number
      • height: number

      Returns Promise<void>

    • Parameters

      • currentTime: number

        The current time of the timeline

      Returns void

      This is called after all the clips have been rendered in the preview, useful if you want to change some other clip states after rendering

    • Starts clip-specific preload work ahead of playback or rendering.

      Parameters

      • currentTime: number

        Current timeline time in seconds.

      Returns void

      Nothing.

    • Removes a previously attached clip mask.

      Parameters

      • clip: Clip

        Mask source clip to detach.

      Returns void

      Nothing.

    • Parameters

      • id: string

      Returns void

    • Parameters

      • id: string

      Returns void

    • Removes any subtitles association from the clip.

      Returns void

      Nothing.

    • Parameters

      • currentTime: number

      Returns void

    • Replaces the in-memory Lottie animation data and rebuilds the runtime renderer around it.

      This is intended for editor workflows that mutate the composition definition after the clip is already loaded.

      Parameters

      • data: any

        New Lottie animation JSON payload.

      Returns Promise<void>

      A promise that resolves after the new animation is ready for rendering.

    • Parameters

      • path: string | number
      • color: number[]

      Returns void

    • Parameters

      Returns void

    • Parameters

      Returns void

    • Parameters

      • layerId: string | number
      • url: string

      Returns void

    • Parameters

      • path: string | number
      • color: number[]

      Returns void

    • Parameters

      • path: string | number
      • width: number

      Returns void

    • Parameters

      • path: string | number
      • text: string

      Returns void

    • Resets every animated clip property back to its non-animated base value.

      Returns void

      Nothing.

    • Resets a single animated property back to its base clip/style value.

      Parameters

      • property: string

        Registered animation property key.

      Returns void

      Nothing.

    • Serializes the Lottie clip, including URLs, editable properties, groups, and playback speed.

      Returns {
          animationController?: {
              animationDataIn?: {
                  amplification?: number;
                  inOutOfRange: OutOfRangeEnum;
                  name: string;
                  offset?: number;
                  outOutOfRange: OutOfRangeEnum;
                  propertyAnimations: {
                      inOutOfRange: OutOfRangeEnum;
                      keyframes: {
                          easing: EasingEnum;
                          relativeProperty?: string;
                          space: AnimationSpaceEnum;
                          time: number;
                          value: string | number;
                      }[];
                      outOutOfRange: OutOfRangeEnum;
                      property: string;
                  }[];
                  speed?: number;
              };
              animationDataLoop?: {
                  amplification?: number;
                  inOutOfRange: OutOfRangeEnum;
                  name: string;
                  offset?: number;
                  outOutOfRange: OutOfRangeEnum;
                  propertyAnimations: {
                      inOutOfRange: OutOfRangeEnum;
                      keyframes: {
                          easing: EasingEnum;
                          relativeProperty?: string;
                          space: AnimationSpaceEnum;
                          time: number;
                          value: string
                          | number;
                      }[];
                      outOutOfRange: OutOfRangeEnum;
                      property: string;
                  }[];
                  speed?: number;
              };
              animationDataOut?: {
                  amplification?: number;
                  inOutOfRange: OutOfRangeEnum;
                  name: string;
                  offset?: number;
                  outOutOfRange: OutOfRangeEnum;
                  propertyAnimations: {
                      inOutOfRange: OutOfRangeEnum;
                      keyframes: {
                          easing: EasingEnum;
                          relativeProperty?: string;
                          space: AnimationSpaceEnum;
                          time: number;
                          value: string
                          | number;
                      }[];
                      outOutOfRange: OutOfRangeEnum;
                      property: string;
                  }[];
                  speed?: number;
              };
              animationInDuration: number;
              animationLoopCount: number;
              animationOutDuration: number;
              loopSmoothing: number;
          };
          assetsUrl?: string;
          blendMode?: NORMAL
          | ADD
          | SCREEN
          | MULTIPLY;
          clipMasks?: { clipId: string; id: string; wrapMode: MaskWrapModeEnum }[];
          customData?: [string, unknown][];
          dataUrl: string;
          duration: number;
          effects: any[];
          filters: {
              clipId?: string;
              filterId: string;
              id: string;
              intensity: number;
              provider: string;
          }[];
          groups?: { id: string; label: string }[];
          id: string;
          isVisible: boolean;
          leftTrim: number;
          mediaDataId?: string;
          name?: string;
          playbackSpeed: number;
          properties?: {
              group?: string;
              id: string;
              label: string;
              path: string;
              type: LottiePropertyTypeEnum;
              value?: unknown;
          }[];
          propertiesUrl?: string;
          propertyAnimator?: {
              initialValues?: [string, string | number | boolean | number[]][];
              tracks: {
                  customData?: [string, unknown][];
                  defaults?: {
                      handleIn?: { time: number; value: number };
                      handleOut?: { time: number; value: number };
                      hold?: boolean;
                  };
                  keyframes: {
                      handleIn: { time: number; value: number };
                      handleOut: { time: number; value: number };
                      hold?: boolean;
                      time: number;
                      value: (string | number | boolean | number[]) & (
                          undefined
                          | string
                          | number
                          | boolean
                          | number[]
                      );
                  }[];
                  property: string;
                  type: PropertyDescriptionTypeEnum;
              }[];
          };
          rightTrim: number;
          startTime: number;
          style?: unknown;
          subtitlesId?: string;
          subtitlesOffset: number;
          text?: string;
          type: string;
          wrapMode?: CLAMP
          | REPEAT
          | PING_PONG
          | EMPTY;
      }

      Serialized Lottie clip payload.

    • Replaces all custom clip metadata with a copy of the provided map.

      Parameters

      • data: Map<string, unknown>

        Metadata entries to store.

      Returns void

      Nothing.

    • Applies a single animated property value to the clip runtime state.

      Parameters

      • property: string

        Registered animation property key.

      • value: any

        Value to apply.

      Returns void

      Nothing.

    • Sets the clip blend mode and applies the matching PIXI blend mode.

      Parameters

      Returns void

      Nothing.

    • Stores arbitrary metadata on the clip.

      Parameters

      • key: string

        Metadata key.

      • value: unknown

        Metadata value.

      • overwrite: boolean = true

        Whether an existing key may be overwritten.

      Returns boolean

      true if the value was stored; otherwise false when overwrite is disabled and the key already exists.

    • Marks whether the clip is currently inside an incoming transition.

      Parameters

      • insideTransition: boolean

        Whether the clip participates in an incoming transition.

      Returns void

      Nothing.

    • Marks whether the clip is currently inside an outgoing transition.

      Parameters

      • insideTransition: boolean

        Whether the clip participates in an outgoing transition.

      Returns void

      Nothing.

    • Updates the owning layer ID tracked by the clip.

      Parameters

      • layerId: string

        Owning layer ID.

      Returns void

      Nothing.

    • Parameters

      • trim: number

      Returns void

    • Sets the user-visible clip name.

      Parameters

      • name: string

        Name to assign.

      Returns void

      Nothing.

    • Updates the Lottie playback speed and retimes trims/start-time so the clip stays consistent on the timeline.

      Parameters

      • speed: number

        New playback speed multiplier.

      • perserveLeftBound: boolean = true

        When true, keeps the current visible left edge anchored in timeline space.

      • perserveTrimmedDuration: boolean = false

        When true, attempts to preserve the current trimmed visible duration.

      Returns void

    • Sets the value of an exposed Lottie property and applies the change to the current animation renderer.

      Supported property types also create undo records so editor changes can be reverted.

      Parameters

      • propertyId: string

        Property descriptor id from the clip's property manifest.

      • value: unknown

        New property value.

      Returns void

    • Parameters

      • trim: number

      Returns void

    • Parameters

      • startTime: number

      Returns void

    • Associates a subtitles asset with the clip and stores its playback offset.

      Parameters

      • subtitlesId: string

        Subtitles asset ID to attach.

      • offset: number = 0

        Global subtitles offset in seconds.

      Returns void

      Nothing.

    • Replaces the subtitles asset ID assigned to the clip without changing the stored offset.

      Parameters

      • subtitlesId: string

        Subtitles asset ID to assign.

      Returns void

      Nothing.

    • Sets the stored subtitles offset for the clip.

      Parameters

      • offset: number

        Subtitles offset in seconds.

      Returns void

      Nothing.

    • Sets the incoming transition ID currently associated with the clip.

      Parameters

      • transitionId: null | string

        Incoming transition ID, or null to clear it.

      Returns void

      Nothing.

    • Sets the outgoing transition ID currently associated with the clip.

      Parameters

      • transitionId: null | string

        Outgoing transition ID, or null to clear it.

      Returns void

      Nothing.

    • Sets whether the clip sprite is renderable.

      Parameters

      • visible: boolean

        Whether the clip should render.

      Returns void

      Nothing.

    • Updates clip animations, keyframed properties, style state, and effect state for the current frame.

      Parameters

      • currentTime: number

        Current timeline time in seconds.

      Returns void

      Nothing.

    • Parameters

      • currentTime: number

      Returns void

    • Reconstructs a Lottie clip from serialized state.

      Parameters

      • payload: object

        Serialized Lottie clip payload.

      Returns LottieClip

      Deserialized Lottie clip instance.

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods
    addClipMaskaddEffectaddFilterclearAllCustomDataclonedestroydiscardProcessinggenerateNewIdgetAllCustomDatagetAnimationDatagetAnimationPropertyValuegetBlendModegetCustomDatagetDurationgetEffectByIdgetEffectsgetEndTimegetFilterByIdgetFiltersgetGroupsgetIdgetInsideTransitiongetIsProcessinggetLayerIdgetLeftBoundgetLeftTrimgetMasksgetMediaIdgetNamegetPlaybackSpeedgetPropertiesgetPropertygetPropertyValuegetRightBoundgetRightTrimgetStartTimegetSubtitlesIdgetSubtitlesOffsetgetTransitionInIdgetTransitionOutIdgetTrimmedDurationgetTypegetVisiblegetWrapModehasCustomDatahasNamehasSpritehitTestinitisActiveisReadymoveByonPauseonPlayonRenderDoneonRenderStartonResizepostRenderpreloadregisterEffectPropertiesregisterFilterPropertiesremoveAllEffectsByEffectIdremoveClipMaskremoveEffectremoveFilterremoveSubtitlesrenderreplaceAnimationDatareplaceFillColorreplaceGradientFillColorreplaceGradientStrokeColorreplaceImagereplaceStrokeColorreplaceStrokeWidthreplaceTextresetAllAnimationPropertiesresetAnimationPropertyValueserializesetAllCustomDatasetAnimationPropertyValuesetBlendModesetCustomDatasetInsideInTransitionsetInsideOutTransitionsetLayerIdsetLeftTrimsetNamesetPlaybackSpeedsetPropertysetRightTrimsetStartTimesetSubtitlessetSubtitlesIdsetSubtitlesOffsetsetTransitionInIdsetTransitionOutIdsetVisiblesetWrapModeunregisterEffectPropertiesunregisterFilterPropertiesupdateupdateMediaDataupdateVisibilitydeserialize