Interface TransitionClipConfig

Contains configuration options used to define both the timing and effects of the animation clip. Used as the last argument in the Transition() factory function created by Webimator.createAnimationClipFactories. Also returned by TransitionClip.getConfig.

See

TransitionClip.getConfig

interface TransitionClipConfig {
    commitsStyles: boolean;
    composite: CompositeOperation;
    cssClasses: Partial<CssClassOptions>;
    delay: number;
    duration: number;
    easing: EasingString;
    endDelay: number;
    playbackRate: number;
    removeInlineStylesOnFinish: boolean;
    runGeneratorsNow: boolean;
    startsNextClipToo: boolean;
    startsWithPrevious: boolean;
}

Hierarchy (view full)

Properties

commitsStyles composite cssClasses delay duration easing endDelay playbackRate removeInlineStylesOnFinish runGeneratorsNow startsNextClipToo startsWithPrevious

Properties

commitsStyles

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

composite: CompositeOperation

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

See

KeyframeEffect: composite property

cssClasses

cssClasses: Partial<CssClassOptions>

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

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

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

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

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

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.

removeInlineStylesOnFinish

removeInlineStylesOnFinish: boolean

If true, any CSS property that this clip's effect targeted will be removed from the element's inline style after the clip finishes playing. For example, if a transition to a style involved changing width and backgroundColor, then the line styles for width and background-color will be deleted after the transition completes.

Remark

Practically, this is intended for the specific use case when an element is transitioning to a new style that is identical to its original state (as in, the transition style is the same as what is already specified in some CSS style for the element, so the inline style resulting from the transition is redundant). Removing the inline styles can be useful for preventing their higher precedence from impacting future attempts to modify the element's styles through normal CSS.

runGeneratorsNow

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

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

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.

Settings

Member Visibility

On This Page

Properties