Used to set the endpoints of a WebimatorConnectorElement.

Contains configuration options used to define both the timing and effects of the animation clip. Returned by ConnectorSetterClip.getConfig.

  • Contains additional properties:
    • (none)
interface ConnectorSetterClipConfig {
    commitsStyles: boolean;
    composite: CompositeOperation;
    cssClasses: Partial<CssClassOptions>;
    delay: number;
    duration: number;
    easing: EasingString;
    endDelay: number;
    playbackRate: number;
    runGeneratorsNow: boolean;
    startsNextClipToo: boolean;
    startsWithPrevious: boolean;
}

Hierarchy (view full)

Properties

commitsStyles: boolean

Determines whether the effects of the animation will persist after the clip finishes.

  • if false, the effects of the animation will not persist after the clip finishes.
  • if true, the effects will attempt to be committed. If the element is not rendered by the time the clip finishes because of the CSS class "wbmtr-display-none", the clip will try to forcefully apply the styles by instantly unhiding the element, committing the animation styles, then re-hiding the element (necessary because JavaScript does not allow animation results to be saved to unrendered elements).
    • If the element is unrendered for any reason other than having the "wbmtr-display-none" class by the time the clip finishes, then this will fail, and an error will be thrown.
composite: CompositeOperation

Resolves how an element's animation impacts the element's underlying property values.

Contains arrays of CSS classes that should be added to or removed from the element.

  • The array of classes to add is added first, and then the array of classes to remove is removed.
  • Changes are automatically undone in the appropriate order when the clip is rewound.
delay: number

The number of milliseconds the delay phase of the animation takes to complete.

  • This refers to the time before the active phase of the animation starts (i.e., before the animation effect begins).
duration: number

The number of milliseconds the active phase of the animation takes to complete.

  • This refers to the actual effect of the animation, not the delay or endDelay.
easing: EasingString

The rate of the animation's change over time.

  • Accepts a typical <easing-function>, such as "linear", "ease-in", "step-end", "cubic-bezier(0.42, 0, 0.58, 1)", etc.
  • Also accepts autocompleted preset strings (such as "bounce-in", "power-1-out", etc.) that produce preset easing effects using linear functions.
endDelay: number

The number of milliseconds the endDelay phase of the animation takes to complete.

  • This refers to the time after the active phase of the animation end (i.e., after the animation effect has finished).
playbackRate: number

The base playback rate of the animation (ignoring any multipliers from a parent sequence/timeline).

  • Example: A value of 1 means 100% (the typical playback rate), and 0.5 means 50% speed.
  • Example: If the playbackRate of the parent sequence is 4 and the playbackRate of this clip is 5, the playbackRate property is still 5, but the clip would run at 4 * 5 = 20x speed.
runGeneratorsNow: boolean

If true, the animation's effect is one-time generated as soon as the clip is instantiated. The result is then used upon every subsequent play/rewind.

If false, the animation's effect is recomputed every time the clip is played or rewound.

startsNextClipToo: boolean

If true, the next clip in the same sequence will play at the same time as this clip.

  • If this clip is not part of a sequence or is at the end of a sequence, this option has no effect.
startsWithPrevious: boolean

If true, this clip will play at the same time as the previous clip in the same sequence.

  • If this clip is not part of a sequence or is at the beginning of a sequence, this option has no effect.