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

  • Contains additional properties:
    • (none)
interface ScrollerClipConfig {
    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.