Class WebChalk

Index

Methods

createAnimationClipFactories newSequence newTimeline

Methods

createAnimationClipFactories

createAnimationClipFactories<CustomEntranceBank, CustomExitBank, CustomEmphasisBank, CustomMotionBank, _EmptyTransitionBank, _EmptyConnectorEntranceBank, _EmptyConnectorExitBank, _EmptyScrollerBank, IncludeLibPresets>(customPresetEffectBanks?, includeLibraryPresets?): {
    ConnectorEntrance: (<TComposerBank, TEffectName, TEffectComposer>(connectorElem:
        | undefined
        | null
        | Element
        | WebChalkConnectorElement, effectName: TEffectName, effectOptions: Parameters<TEffectComposer["composeEffect"]>, effectConfig?: Partial<Layer4MutableConfig<ConnectorEntranceClip<Readonly<StripDuplicateMethodAutocompletion<{
        defaultConfig?: Partial<unknown>;
        effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
        immutableConfig?: Partial<unknown>;
        composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
            backwardKeyframesGenerator?: (...) | (...);
            backwardMutatorGenerator?: (...) | (...);
            forwardKeyframesGenerator?: (...) | (...);
            forwardMutatorGenerator?: (...) | (...);
            reverseKeyframesEffect?: (...) | (...) | (...);
            reverseMutatorEffect?: (...) | (...) | (...);
        }>;
    }>>>, TEffectComposer>>) => ConnectorEntranceClip<TEffectComposer>);
    ConnectorExit: (<TComposerBank, TEffectName, TEffectComposer>(connectorElem:
        | undefined
        | null
        | Element
        | WebChalkConnectorElement, effectName: TEffectName, effectOptions: Parameters<TEffectComposer["composeEffect"]>, effectConfig?: Partial<Layer4MutableConfig<ConnectorExitClip<Readonly<StripDuplicateMethodAutocompletion<{
        defaultConfig?: Partial<unknown>;
        effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
        immutableConfig?: Partial<unknown>;
        composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
            backwardKeyframesGenerator?: (...) | (...);
            backwardMutatorGenerator?: (...) | (...);
            forwardKeyframesGenerator?: (...) | (...);
            forwardMutatorGenerator?: (...) | (...);
            reverseKeyframesEffect?: (...) | (...) | (...);
            reverseMutatorEffect?: (...) | (...) | (...);
        }>;
    }>>>, TEffectComposer>>) => ConnectorExitClip<TEffectComposer>);
    ConnectorSetter: ((connectorElem:
        | undefined
        | null
        | Element
        | WebChalkConnectorElement, pointA: ["preserve"] | [elemA: null | Element, xPlacement: number | MultiUnitPlacementX, yPlacement: number | MultiUnitPlacementY], pointB: ["preserve"] | [elemB: null | Element, xPlacement: number | MultiUnitPlacementX, yPlacement: number | MultiUnitPlacementY], connectorConfig?: WebChalkConnectorElementConfig) => ConnectorSetterClip);
    Emphasis: (<TComposerBank, TEffectName, TEffectComposer>(domElem: undefined | null | Element, effectName: TEffectName, effectOptions: Parameters<TEffectComposer["composeEffect"]>, effectConfig?: Partial<Layer4MutableConfig<EmphasisClip<Readonly<StripDuplicateMethodAutocompletion<{
        defaultConfig?: Partial<unknown>;
        effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
        immutableConfig?: Partial<unknown>;
        composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
            backwardKeyframesGenerator?: (...) | (...);
            backwardMutatorGenerator?: (...) | (...);
            forwardKeyframesGenerator?: (...) | (...);
            forwardMutatorGenerator?: (...) | (...);
            reverseKeyframesEffect?: (...) | (...) | (...);
            reverseMutatorEffect?: (...) | (...) | (...);
        }>;
    }>>>, TEffectComposer>>) => EmphasisClip<TEffectComposer>);
    Entrance: (<TComposerBank, TEffectName, TEffectComposer>(domElem: undefined | null | Element, effectName: TEffectName, effectOptions: Parameters<TEffectComposer["composeEffect"]>, effectConfig?: Partial<Layer4MutableConfig<EntranceClip<Readonly<StripDuplicateMethodAutocompletion<{
        defaultConfig?: Partial<unknown>;
        effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
        immutableConfig?: Partial<unknown>;
        composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
            backwardKeyframesGenerator?: (...) | (...);
            backwardMutatorGenerator?: (...) | (...);
            forwardKeyframesGenerator?: (...) | (...);
            forwardMutatorGenerator?: (...) | (...);
            reverseKeyframesEffect?: (...) | (...) | (...);
            reverseMutatorEffect?: (...) | (...) | (...);
        }>;
    }>>>, TEffectComposer>>) => EntranceClip<TEffectComposer>);
    Exit: (<TComposerBank, TEffectName, TEffectComposer>(domElem: undefined | null | Element, effectName: TEffectName, effectOptions: Parameters<TEffectComposer["composeEffect"]>, effectConfig?: Partial<Layer4MutableConfig<ExitClip<Readonly<StripDuplicateMethodAutocompletion<{
        defaultConfig?: Partial<unknown>;
        effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
        immutableConfig?: Partial<unknown>;
        composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
            backwardKeyframesGenerator?: (...) | (...);
            backwardMutatorGenerator?: (...) | (...);
            forwardKeyframesGenerator?: (...) | (...);
            forwardMutatorGenerator?: (...) | (...);
            reverseKeyframesEffect?: (...) | (...) | (...);
            reverseMutatorEffect?: (...) | (...) | (...);
        }>;
    }>>>, TEffectComposer>>) => ExitClip<TEffectComposer>);
    Motion: (<TComposerBank, TEffectName, TEffectComposer>(domElem: undefined | null | Element, effectName: TEffectName, effectOptions: Parameters<TEffectComposer["composeEffect"]>, effectConfig?: Partial<Layer4MutableConfig<MotionClip<Readonly<StripDuplicateMethodAutocompletion<{
        defaultConfig?: Partial<unknown>;
        effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
        immutableConfig?: Partial<unknown>;
        composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
            backwardKeyframesGenerator?: (...) | (...);
            backwardMutatorGenerator?: (...) | (...);
            forwardKeyframesGenerator?: (...) | (...);
            forwardMutatorGenerator?: (...) | (...);
            reverseKeyframesEffect?: (...) | (...) | (...);
            reverseMutatorEffect?: (...) | (...) | (...);
        }>;
    }>>>, TEffectComposer>>) => MotionClip<TEffectComposer>);
    Scroller: (<TComposerBank, TEffectName, TEffectComposer>(domElem: undefined | null | Element, effectName: TEffectName, effectOptions: Parameters<TEffectComposer["composeEffect"]>, effectConfig?: Partial<Layer4MutableConfig<ScrollerClip<Readonly<StripDuplicateMethodAutocompletion<{
        defaultConfig?: Partial<unknown>;
        effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
        immutableConfig?: Partial<unknown>;
        composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
            backwardKeyframesGenerator?: (...) | (...);
            backwardMutatorGenerator?: (...) | (...);
            forwardKeyframesGenerator?: (...) | (...);
            forwardMutatorGenerator?: (...) | (...);
            reverseKeyframesEffect?: (...) | (...) | (...);
            reverseMutatorEffect?: (...) | (...) | (...);
        }>;
    }>>>, TEffectComposer>>) => ScrollerClip<TEffectComposer>);
    Transition: (<TComposerBank, TEffectName, TEffectComposer>(domElem: undefined | null | Element, effectName: TEffectName, effectOptions: Parameters<TEffectComposer["composeEffect"]>, effectConfig?: Partial<Layer4MutableConfig<TransitionClip<Readonly<StripDuplicateMethodAutocompletion<{
        defaultConfig?: Partial<unknown>;
        effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
        immutableConfig?: Partial<unknown>;
        composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
            backwardKeyframesGenerator?: (...) | (...);
            backwardMutatorGenerator?: (...) | (...);
            forwardKeyframesGenerator?: (...) | (...);
            forwardMutatorGenerator?: (...) | (...);
            reverseKeyframesEffect?: (...) | (...) | (...);
            reverseMutatorEffect?: (...) | (...) | (...);
        }>;
    }>>>, TEffectComposer>>) => TransitionClip<TEffectComposer>);
}
Creates functions that return AnimClips for specific effect categories. A clip for a given category can use a single preset animation effect from the effects bank of the same category. For example, createAnimationClipFactories().Entrance(someElement, '~appear', []) will use the "~appear" animation effect from the bank of entrance animation effects, but the "~appear" animation will obviously not be found in the bank of exit animation effects, so createAnimationClipFactories().Exit(someElement, '~appear', []) will throw an error.
- Developers may add their own custom animations to the Entrance, Exit, Emphasis, and Motion categories by using the customPresetEffectBanks parameter.
Type Parameters
- CustomEntranceBank extends Readonly<Record<string, Readonly<StripDuplicateMethodAutocompletion<{
      defaultConfig?: Partial<Layer3MutableClipConfig<EntranceClip<Readonly<StripDuplicateMethodAutocompletion<(...)>>>>>;
      effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
      immutableConfig?: Partial<Layer3MutableClipConfig<EntranceClip<Readonly<StripDuplicateMethodAutocompletion<(...)>>>>>;
      composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
          backwardKeyframesGenerator?: (() => Keyframes);
          backwardMutatorGenerator?: (() => Mutator);
          forwardKeyframesGenerator?: (() => Keyframes);
          forwardMutatorGenerator?: (() => Mutator);
          reverseKeyframesEffect?: boolean;
          reverseMutatorEffect?: boolean;
      }>;
  }>>>> = {}
- CustomExitBank extends Readonly<Record<string, Readonly<StripDuplicateMethodAutocompletion<{
      defaultConfig?: Partial<Layer3MutableClipConfig<ExitClip<Readonly<StripDuplicateMethodAutocompletion<(...)>>>>>;
      effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
      immutableConfig?: Partial<Layer3MutableClipConfig<ExitClip<Readonly<StripDuplicateMethodAutocompletion<(...)>>>>>;
      composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
          backwardKeyframesGenerator?: (() => Keyframes);
          backwardMutatorGenerator?: (() => Mutator);
          forwardKeyframesGenerator?: (() => Keyframes);
          forwardMutatorGenerator?: (() => Mutator);
          reverseKeyframesEffect?: boolean;
          reverseMutatorEffect?: boolean;
      }>;
  }>>>> = {}
- CustomEmphasisBank extends Readonly<Record<string, Readonly<StripDuplicateMethodAutocompletion<{
      defaultConfig?: Partial<Layer3MutableClipConfig<EmphasisClip<Readonly<StripDuplicateMethodAutocompletion<(...)>>>>>;
      effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
      immutableConfig?: Partial<Layer3MutableClipConfig<EmphasisClip<Readonly<StripDuplicateMethodAutocompletion<(...)>>>>>;
      composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
          backwardKeyframesGenerator?: (() => Keyframes);
          backwardMutatorGenerator?: (() => Mutator);
          forwardKeyframesGenerator?: (() => Keyframes);
          forwardMutatorGenerator?: (() => Mutator);
          reverseKeyframesEffect?: boolean;
          reverseMutatorEffect?: boolean;
      }>;
  }>>>> = {}
- CustomMotionBank extends Readonly<Record<string, Readonly<StripDuplicateMethodAutocompletion<{
      defaultConfig?: Partial<Layer3MutableClipConfig<MotionClip<Readonly<StripDuplicateMethodAutocompletion<(...)>>>>>;
      effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
      immutableConfig?: Partial<Layer3MutableClipConfig<MotionClip<Readonly<StripDuplicateMethodAutocompletion<(...)>>>>>;
      composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
          backwardKeyframesGenerator?: (() => Keyframes);
          backwardMutatorGenerator?: (() => Mutator);
          forwardKeyframesGenerator?: (() => Keyframes);
          forwardMutatorGenerator?: (() => Mutator);
          reverseKeyframesEffect?: boolean;
          reverseMutatorEffect?: boolean;
      }>;
  }>>>> = {}
- _EmptyTransitionBank extends Readonly<Record<string, Readonly<StripDuplicateMethodAutocompletion<{
      defaultConfig?: Partial<Layer3MutableClipConfig<TransitionClip<Readonly<StripDuplicateMethodAutocompletion<(...)>>>>>;
      effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
      immutableConfig?: Partial<Layer3MutableClipConfig<TransitionClip<Readonly<StripDuplicateMethodAutocompletion<(...)>>>>>;
      composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
          backwardKeyframesGenerator?: (() => Keyframes);
          backwardMutatorGenerator?: (() => Mutator);
          forwardKeyframesGenerator?: (() => Keyframes);
          forwardMutatorGenerator?: (() => Mutator);
          reverseKeyframesEffect?: boolean;
          reverseMutatorEffect?: boolean;
      }>;
  }>>>> = {}
- _EmptyConnectorEntranceBank extends Readonly<Record<string, Readonly<StripDuplicateMethodAutocompletion<{
      defaultConfig?: Partial<Layer3MutableClipConfig<ConnectorEntranceClip<Readonly<StripDuplicateMethodAutocompletion<(...)>>>>>;
      effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
      immutableConfig?: Partial<Layer3MutableClipConfig<ConnectorEntranceClip<Readonly<StripDuplicateMethodAutocompletion<(...)>>>>>;
      composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
          backwardKeyframesGenerator?: (() => Keyframes);
          backwardMutatorGenerator?: (() => Mutator);
          forwardKeyframesGenerator?: (() => Keyframes);
          forwardMutatorGenerator?: (() => Mutator);
          reverseKeyframesEffect?: boolean;
          reverseMutatorEffect?: boolean;
      }>;
  }>>>> = {}
- _EmptyConnectorExitBank extends Readonly<Record<string, Readonly<StripDuplicateMethodAutocompletion<{
      defaultConfig?: Partial<Layer3MutableClipConfig<ConnectorExitClip<Readonly<StripDuplicateMethodAutocompletion<(...)>>>>>;
      effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
      immutableConfig?: Partial<Layer3MutableClipConfig<ConnectorExitClip<Readonly<StripDuplicateMethodAutocompletion<(...)>>>>>;
      composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
          backwardKeyframesGenerator?: (() => Keyframes);
          backwardMutatorGenerator?: (() => Mutator);
          forwardKeyframesGenerator?: (() => Keyframes);
          forwardMutatorGenerator?: (() => Mutator);
          reverseKeyframesEffect?: boolean;
          reverseMutatorEffect?: boolean;
      }>;
  }>>>> = {}
- _EmptyScrollerBank extends Readonly<Record<string, Readonly<StripDuplicateMethodAutocompletion<{
      defaultConfig?: Partial<Layer3MutableClipConfig<ScrollerClip<Readonly<StripDuplicateMethodAutocompletion<(...)>>>>>;
      effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
      immutableConfig?: Partial<Layer3MutableClipConfig<ScrollerClip<Readonly<StripDuplicateMethodAutocompletion<(...)>>>>>;
      composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
          backwardKeyframesGenerator?: (() => Keyframes);
          backwardMutatorGenerator?: (() => Mutator);
          forwardKeyframesGenerator?: (() => Keyframes);
          forwardMutatorGenerator?: (() => Mutator);
          reverseKeyframesEffect?: boolean;
          reverseMutatorEffect?: boolean;
      }>;
  }>>>> = {}
- IncludeLibPresets extends boolean = true
Parameters
- customPresetEffectBanks: {
      customEmphasisEffects?: CustomEmphasisBank & Readonly<Record<string, Readonly<StripDuplicateMethodAutocompletion<{
          defaultConfig?: Partial<Layer3MutableClipConfig<(...)>>;
          effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
          immutableConfig?: Partial<Layer3MutableClipConfig<(...)>>;
          composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
              backwardKeyframesGenerator?: (...) | (...);
              backwardMutatorGenerator?: (...) | (...);
              forwardKeyframesGenerator?: (...) | (...);
              forwardMutatorGenerator?: (...) | (...);
              reverseKeyframesEffect?: (...) | (...) | (...);
              reverseMutatorEffect?: (...) | (...) | (...);
          }>;
      }>>>>;
      customEntranceEffects?: CustomEntranceBank & Readonly<Record<string, Readonly<StripDuplicateMethodAutocompletion<{
          defaultConfig?: Partial<Layer3MutableClipConfig<(...)>>;
          effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
          immutableConfig?: Partial<Layer3MutableClipConfig<(...)>>;
          composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
              backwardKeyframesGenerator?: (...) | (...);
              backwardMutatorGenerator?: (...) | (...);
              forwardKeyframesGenerator?: (...) | (...);
              forwardMutatorGenerator?: (...) | (...);
              reverseKeyframesEffect?: (...) | (...) | (...);
              reverseMutatorEffect?: (...) | (...) | (...);
          }>;
      }>>>>;
      customExitEffects?: CustomExitBank & Readonly<Record<string, Readonly<StripDuplicateMethodAutocompletion<{
          defaultConfig?: Partial<Layer3MutableClipConfig<(...)>>;
          effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
          immutableConfig?: Partial<Layer3MutableClipConfig<(...)>>;
          composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
              backwardKeyframesGenerator?: (...) | (...);
              backwardMutatorGenerator?: (...) | (...);
              forwardKeyframesGenerator?: (...) | (...);
              forwardMutatorGenerator?: (...) | (...);
              reverseKeyframesEffect?: (...) | (...) | (...);
              reverseMutatorEffect?: (...) | (...) | (...);
          }>;
      }>>>>;
      customMotionEffects?: CustomMotionBank & Readonly<Record<string, Readonly<StripDuplicateMethodAutocompletion<{
          defaultConfig?: Partial<Layer3MutableClipConfig<(...)>>;
          effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
          immutableConfig?: Partial<Layer3MutableClipConfig<(...)>>;
          composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
              backwardKeyframesGenerator?: (...) | (...);
              backwardMutatorGenerator?: (...) | (...);
              forwardKeyframesGenerator?: (...) | (...);
              forwardMutatorGenerator?: (...) | (...);
              reverseKeyframesEffect?: (...) | (...) | (...);
              reverseMutatorEffect?: (...) | (...) | (...);
          }>;
      }>>>>;
  } = {}
  optional object containing additional banks that the developer can use to add their own custom preset effects
  - OptionalcustomEmphasisEffects?: CustomEmphasisBank & Readonly<Record<string, Readonly<StripDuplicateMethodAutocompletion<{
        defaultConfig?: Partial<Layer3MutableClipConfig<(...)>>;
        effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
        immutableConfig?: Partial<Layer3MutableClipConfig<(...)>>;
        composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
            backwardKeyframesGenerator?: (...) | (...);
            backwardMutatorGenerator?: (...) | (...);
            forwardKeyframesGenerator?: (...) | (...);
            forwardMutatorGenerator?: (...) | (...);
            reverseKeyframesEffect?: (...) | (...) | (...);
            reverseMutatorEffect?: (...) | (...) | (...);
        }>;
    }>>>>
    object of type EffectComposerBank, containing keys that represent effect names and values that are EffectComposers to be used with the Emphasis() clip factory function
  - OptionalcustomEntranceEffects?: CustomEntranceBank & Readonly<Record<string, Readonly<StripDuplicateMethodAutocompletion<{
        defaultConfig?: Partial<Layer3MutableClipConfig<(...)>>;
        effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
        immutableConfig?: Partial<Layer3MutableClipConfig<(...)>>;
        composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
            backwardKeyframesGenerator?: (...) | (...);
            backwardMutatorGenerator?: (...) | (...);
            forwardKeyframesGenerator?: (...) | (...);
            forwardMutatorGenerator?: (...) | (...);
            reverseKeyframesEffect?: (...) | (...) | (...);
            reverseMutatorEffect?: (...) | (...) | (...);
        }>;
    }>>>>
    object of type EffectComposerBank, containing keys that represent effect names and values that are EffectComposers to be used with Entrance() clip factory function
  - OptionalcustomExitEffects?: CustomExitBank & Readonly<Record<string, Readonly<StripDuplicateMethodAutocompletion<{
        defaultConfig?: Partial<Layer3MutableClipConfig<(...)>>;
        effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
        immutableConfig?: Partial<Layer3MutableClipConfig<(...)>>;
        composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
            backwardKeyframesGenerator?: (...) | (...);
            backwardMutatorGenerator?: (...) | (...);
            forwardKeyframesGenerator?: (...) | (...);
            forwardMutatorGenerator?: (...) | (...);
            reverseKeyframesEffect?: (...) | (...) | (...);
            reverseMutatorEffect?: (...) | (...) | (...);
        }>;
    }>>>>
    object of type EffectComposerBank, containing keys that represent effect names and values that are EffectComposers to be used with the Exit() clip factory function
  - OptionalcustomMotionEffects?: CustomMotionBank & Readonly<Record<string, Readonly<StripDuplicateMethodAutocompletion<{
        defaultConfig?: Partial<Layer3MutableClipConfig<(...)>>;
        effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
        immutableConfig?: Partial<Layer3MutableClipConfig<(...)>>;
        composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
            backwardKeyframesGenerator?: (...) | (...);
            backwardMutatorGenerator?: (...) | (...);
            forwardKeyframesGenerator?: (...) | (...);
            forwardMutatorGenerator?: (...) | (...);
            reverseKeyframesEffect?: (...) | (...) | (...);
            reverseMutatorEffect?: (...) | (...) | (...);
        }>;
    }>>>>
    object of type EffectComposerBank, containing keys that represent effect names and values that are EffectComposers to be used with the Motion() clip factory function
- includeLibraryPresets: void | IncludeLibPresets = ...
  if false, the preset effects that normally come with the framework will be excluded
  Default Value
  true
Returns {
    ConnectorEntrance: (<TComposerBank, TEffectName, TEffectComposer>(connectorElem:
        | undefined
        | null
        | Element
        | WebChalkConnectorElement, effectName: TEffectName, effectOptions: Parameters<TEffectComposer["composeEffect"]>, effectConfig?: Partial<Layer4MutableConfig<ConnectorEntranceClip<Readonly<StripDuplicateMethodAutocompletion<{
        defaultConfig?: Partial<unknown>;
        effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
        immutableConfig?: Partial<unknown>;
        composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
            backwardKeyframesGenerator?: (...) | (...);
            backwardMutatorGenerator?: (...) | (...);
            forwardKeyframesGenerator?: (...) | (...);
            forwardMutatorGenerator?: (...) | (...);
            reverseKeyframesEffect?: (...) | (...) | (...);
            reverseMutatorEffect?: (...) | (...) | (...);
        }>;
    }>>>, TEffectComposer>>) => ConnectorEntranceClip<TEffectComposer>);
    ConnectorExit: (<TComposerBank, TEffectName, TEffectComposer>(connectorElem:
        | undefined
        | null
        | Element
        | WebChalkConnectorElement, effectName: TEffectName, effectOptions: Parameters<TEffectComposer["composeEffect"]>, effectConfig?: Partial<Layer4MutableConfig<ConnectorExitClip<Readonly<StripDuplicateMethodAutocompletion<{
        defaultConfig?: Partial<unknown>;
        effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
        immutableConfig?: Partial<unknown>;
        composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
            backwardKeyframesGenerator?: (...) | (...);
            backwardMutatorGenerator?: (...) | (...);
            forwardKeyframesGenerator?: (...) | (...);
            forwardMutatorGenerator?: (...) | (...);
            reverseKeyframesEffect?: (...) | (...) | (...);
            reverseMutatorEffect?: (...) | (...) | (...);
        }>;
    }>>>, TEffectComposer>>) => ConnectorExitClip<TEffectComposer>);
    ConnectorSetter: ((connectorElem:
        | undefined
        | null
        | Element
        | WebChalkConnectorElement, pointA: ["preserve"] | [elemA: null | Element, xPlacement: number | MultiUnitPlacementX, yPlacement: number | MultiUnitPlacementY], pointB: ["preserve"] | [elemB: null | Element, xPlacement: number | MultiUnitPlacementX, yPlacement: number | MultiUnitPlacementY], connectorConfig?: WebChalkConnectorElementConfig) => ConnectorSetterClip);
    Emphasis: (<TComposerBank, TEffectName, TEffectComposer>(domElem: undefined | null | Element, effectName: TEffectName, effectOptions: Parameters<TEffectComposer["composeEffect"]>, effectConfig?: Partial<Layer4MutableConfig<EmphasisClip<Readonly<StripDuplicateMethodAutocompletion<{
        defaultConfig?: Partial<unknown>;
        effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
        immutableConfig?: Partial<unknown>;
        composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
            backwardKeyframesGenerator?: (...) | (...);
            backwardMutatorGenerator?: (...) | (...);
            forwardKeyframesGenerator?: (...) | (...);
            forwardMutatorGenerator?: (...) | (...);
            reverseKeyframesEffect?: (...) | (...) | (...);
            reverseMutatorEffect?: (...) | (...) | (...);
        }>;
    }>>>, TEffectComposer>>) => EmphasisClip<TEffectComposer>);
    Entrance: (<TComposerBank, TEffectName, TEffectComposer>(domElem: undefined | null | Element, effectName: TEffectName, effectOptions: Parameters<TEffectComposer["composeEffect"]>, effectConfig?: Partial<Layer4MutableConfig<EntranceClip<Readonly<StripDuplicateMethodAutocompletion<{
        defaultConfig?: Partial<unknown>;
        effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
        immutableConfig?: Partial<unknown>;
        composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
            backwardKeyframesGenerator?: (...) | (...);
            backwardMutatorGenerator?: (...) | (...);
            forwardKeyframesGenerator?: (...) | (...);
            forwardMutatorGenerator?: (...) | (...);
            reverseKeyframesEffect?: (...) | (...) | (...);
            reverseMutatorEffect?: (...) | (...) | (...);
        }>;
    }>>>, TEffectComposer>>) => EntranceClip<TEffectComposer>);
    Exit: (<TComposerBank, TEffectName, TEffectComposer>(domElem: undefined | null | Element, effectName: TEffectName, effectOptions: Parameters<TEffectComposer["composeEffect"]>, effectConfig?: Partial<Layer4MutableConfig<ExitClip<Readonly<StripDuplicateMethodAutocompletion<{
        defaultConfig?: Partial<unknown>;
        effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
        immutableConfig?: Partial<unknown>;
        composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
            backwardKeyframesGenerator?: (...) | (...);
            backwardMutatorGenerator?: (...) | (...);
            forwardKeyframesGenerator?: (...) | (...);
            forwardMutatorGenerator?: (...) | (...);
            reverseKeyframesEffect?: (...) | (...) | (...);
            reverseMutatorEffect?: (...) | (...) | (...);
        }>;
    }>>>, TEffectComposer>>) => ExitClip<TEffectComposer>);
    Motion: (<TComposerBank, TEffectName, TEffectComposer>(domElem: undefined | null | Element, effectName: TEffectName, effectOptions: Parameters<TEffectComposer["composeEffect"]>, effectConfig?: Partial<Layer4MutableConfig<MotionClip<Readonly<StripDuplicateMethodAutocompletion<{
        defaultConfig?: Partial<unknown>;
        effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
        immutableConfig?: Partial<unknown>;
        composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
            backwardKeyframesGenerator?: (...) | (...);
            backwardMutatorGenerator?: (...) | (...);
            forwardKeyframesGenerator?: (...) | (...);
            forwardMutatorGenerator?: (...) | (...);
            reverseKeyframesEffect?: (...) | (...) | (...);
            reverseMutatorEffect?: (...) | (...) | (...);
        }>;
    }>>>, TEffectComposer>>) => MotionClip<TEffectComposer>);
    Scroller: (<TComposerBank, TEffectName, TEffectComposer>(domElem: undefined | null | Element, effectName: TEffectName, effectOptions: Parameters<TEffectComposer["composeEffect"]>, effectConfig?: Partial<Layer4MutableConfig<ScrollerClip<Readonly<StripDuplicateMethodAutocompletion<{
        defaultConfig?: Partial<unknown>;
        effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
        immutableConfig?: Partial<unknown>;
        composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
            backwardKeyframesGenerator?: (...) | (...);
            backwardMutatorGenerator?: (...) | (...);
            forwardKeyframesGenerator?: (...) | (...);
            forwardMutatorGenerator?: (...) | (...);
            reverseKeyframesEffect?: (...) | (...) | (...);
            reverseMutatorEffect?: (...) | (...) | (...);
        }>;
    }>>>, TEffectComposer>>) => ScrollerClip<TEffectComposer>);
    Transition: (<TComposerBank, TEffectName, TEffectComposer>(domElem: undefined | null | Element, effectName: TEffectName, effectOptions: Parameters<TEffectComposer["composeEffect"]>, effectConfig?: Partial<Layer4MutableConfig<TransitionClip<Readonly<StripDuplicateMethodAutocompletion<{
        defaultConfig?: Partial<unknown>;
        effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
        immutableConfig?: Partial<unknown>;
        composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
            backwardKeyframesGenerator?: (...) | (...);
            backwardMutatorGenerator?: (...) | (...);
            forwardKeyframesGenerator?: (...) | (...);
            forwardMutatorGenerator?: (...) | (...);
            reverseKeyframesEffect?: (...) | (...) | (...);
            reverseMutatorEffect?: (...) | (...) | (...);
        }>;
    }>>>, TEffectComposer>>) => TransitionClip<TEffectComposer>);
}
Factory functions that return category-specific AnimClips, each with intellisense for their category-specific effects banks.
- ConnectorEntrance: (<TComposerBank, TEffectName, TEffectComposer>(connectorElem:
      | undefined
      | null
      | Element
      | WebChalkConnectorElement, effectName: TEffectName, effectOptions: Parameters<TEffectComposer["composeEffect"]>, effectConfig?: Partial<Layer4MutableConfig<ConnectorEntranceClip<Readonly<StripDuplicateMethodAutocompletion<{
      defaultConfig?: Partial<unknown>;
      effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
      immutableConfig?: Partial<unknown>;
      composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
          backwardKeyframesGenerator?: (...) | (...);
          backwardMutatorGenerator?: (...) | (...);
          forwardKeyframesGenerator?: (...) | (...);
          forwardMutatorGenerator?: (...) | (...);
          reverseKeyframesEffect?: (...) | (...) | (...);
          reverseMutatorEffect?: (...) | (...) | (...);
      }>;
  }>>>, TEffectComposer>>) => ConnectorEntranceClip<TEffectComposer>)
  Creates a ConnectorEntranceClip, which can be used to reveal a WebChalkConnectorElement that was hidden.
  - - <TComposerBank, TEffectName, TEffectComposer>(connectorElem, effectName, effectOptions, effectConfig?): ConnectorEntranceClip<TEffectComposer>
    - Type Parameters
      TComposerBank extends Readonly<(IncludeLibPresets extends true
          ? {
              ~appear: {
                  defaultConfig: {};
                  effectCompositionFrequency: "on-first-play-only";
                  immutableConfig: {
                      composite: "replace";
                      duration: 0;
                      easing: "linear";
                  };
                  composeEffect(): {};
              };
              ~fade-in: {
                  defaultConfig: {};
                  effectCompositionFrequency: "on-first-play-only";
                  immutableConfig: {
                      composite: "replace";
                  };
                  composeEffect(): {
                      forwardKeyframesGenerator: (() => ((...) | (...))[]);
                  };
              };
              ~trace: {
                  defaultConfig: {};
                  effectCompositionFrequency: "on-every-play";
                  immutableConfig: {
                      composite: "replace";
                  };
                  composeEffect(direction?:
                      | "from-left"
                      | "from-top"
                      | "from-bottom"
                      | "from-right"
                      | "from-A"
                      | "from-B"): {
                      forwardKeyframesGenerator: (() => Keyframe[]);
                  };
              };
          }
          : {}) & _EmptyConnectorEntranceBank>
      TEffectName extends never
      TEffectComposer extends never
      Parameters
      connectorElem:
          | undefined
          | null
          | Element
          | WebChalkConnectorElement
      effectName: TEffectName
      the name of the preset animation effect
      
      effectOptions: Parameters<TEffectComposer["composeEffect"]>
      array of arguments that can be used to customize the appearance of the chosen animation effect
      
      effectConfig: Partial<Layer4MutableConfig<ConnectorEntranceClip<Readonly<StripDuplicateMethodAutocompletion<{
          defaultConfig?: Partial<unknown>;
          effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
          immutableConfig?: Partial<unknown>;
          composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
              backwardKeyframesGenerator?: (...) | (...);
              backwardMutatorGenerator?: (...) | (...);
              forwardKeyframesGenerator?: (...) | (...);
              forwardMutatorGenerator?: (...) | (...);
              reverseKeyframesEffect?: (...) | (...) | (...);
              reverseMutatorEffect?: (...) | (...) | (...);
          }>;
      }>>>, TEffectComposer>> = {}
      configuration options object (ConnectorEntranceClipConfig) that defines the behavior of the clip
      Returns ConnectorEntranceClip<TEffectComposer>
      A ConnectorEntranceClip object.
```
// retrieve connector entrance clip factory function;
const { ConnectorEntrance } = webchalk.createAnimationClipFactories();

// select connector elements from the DOM
const topConnector = document.querySelector('.connector--thick');
const middleConnector = document.querySelector('.connector--skinny');
const verticalConnector = document.querySelector('.connector--red');
const bottomConnector = document.querySelector('.connector--dashed');

// A = element, B = effect name, C = effect options, D = configuration (optional)

// create connector entrance clips using factory function
//                              A             B           C   D             
const clip1 = ConnectorEntrance(topConnector, '~fade-in', [], {duration: 2000, playbackRate: 2});
//                              A                B         C
const clip2 = ConnectorEntrance(middleConnector, '~trace', ['from-A']);
//                              A                  B         C                D
const clip3 = ConnectorEntrance(verticalConnector, '~trace', ['from-bottom'], {delay: 500});
//                              A                B          C
const clip4 = ConnectorEntrance(bottomConnector, '~appear', []);

// play clips (all will play at the same time because they are asynchronous)
clip1.play(); // topConnector fades in
clip2.play(); // middleConnector is drawn from its point A to its point B
clip3.play(); // verticalConnector is draw starting from whichever endpoint is lower
clip4.play(); // bottomConnector appears instantly
```
- ConnectorExit: (<TComposerBank, TEffectName, TEffectComposer>(connectorElem:
      | undefined
      | null
      | Element
      | WebChalkConnectorElement, effectName: TEffectName, effectOptions: Parameters<TEffectComposer["composeEffect"]>, effectConfig?: Partial<Layer4MutableConfig<ConnectorExitClip<Readonly<StripDuplicateMethodAutocompletion<{
      defaultConfig?: Partial<unknown>;
      effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
      immutableConfig?: Partial<unknown>;
      composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
          backwardKeyframesGenerator?: (...) | (...);
          backwardMutatorGenerator?: (...) | (...);
          forwardKeyframesGenerator?: (...) | (...);
          forwardMutatorGenerator?: (...) | (...);
          reverseKeyframesEffect?: (...) | (...) | (...);
          reverseMutatorEffect?: (...) | (...) | (...);
      }>;
  }>>>, TEffectComposer>>) => ConnectorExitClip<TEffectComposer>)
  Creates a ConnectorExitClip, which can be used to unrender a WebChalkConnectorElement.
  - - <TComposerBank, TEffectName, TEffectComposer>(connectorElem, effectName, effectOptions, effectConfig?): ConnectorExitClip<TEffectComposer>
    - Type Parameters
      TComposerBank extends Readonly<(IncludeLibPresets extends true
          ? {
              ~disappear: {
                  defaultConfig: {};
                  effectCompositionFrequency: "on-first-play-only";
                  immutableConfig: {
                      composite: "replace";
                      duration: 0;
                      easing: "linear";
                  };
                  composeEffect(): {};
              };
              ~fade-out: {
                  defaultConfig: {};
                  effectCompositionFrequency: "on-first-play-only";
                  immutableConfig: {
                      composite: "replace";
                  };
                  composeEffect(): {
                      forwardKeyframesGenerator: (() => ((...) | (...))[]);
                  };
              };
              ~trace: {
                  defaultConfig: {};
                  effectCompositionFrequency: "on-every-play";
                  immutableConfig: {
                      composite: "replace";
                  };
                  composeEffect(direction?:
                      | "from-left"
                      | "from-top"
                      | "from-bottom"
                      | "from-right"
                      | "from-A"
                      | "from-B"): {
                      forwardKeyframesGenerator: (() => Keyframe[]);
                  };
              };
          }
          : {}) & _EmptyConnectorExitBank>
      TEffectName extends never
      TEffectComposer extends never
      Parameters
      connectorElem:
          | undefined
          | null
          | Element
          | WebChalkConnectorElement
      effectName: TEffectName
      the name of the preset animation effect
      
      effectOptions: Parameters<TEffectComposer["composeEffect"]>
      array of arguments that can be used to customize the appearance of the chosen animation effect
      
      effectConfig: Partial<Layer4MutableConfig<ConnectorExitClip<Readonly<StripDuplicateMethodAutocompletion<{
          defaultConfig?: Partial<unknown>;
          effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
          immutableConfig?: Partial<unknown>;
          composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
              backwardKeyframesGenerator?: (...) | (...);
              backwardMutatorGenerator?: (...) | (...);
              forwardKeyframesGenerator?: (...) | (...);
              forwardMutatorGenerator?: (...) | (...);
              reverseKeyframesEffect?: (...) | (...) | (...);
              reverseMutatorEffect?: (...) | (...) | (...);
          }>;
      }>>>, TEffectComposer>> = {}
      configuration options object (ConnectorExitClipConfig) that defines the behavior of the clip
      Returns ConnectorExitClip<TEffectComposer>
      A ConnectorExitClip object.
```
// retrieve connector exit clip factory function;
const { ConnectorExit } = webchalk.createAnimationClipFactories();

// select connector elements from the DOM
const topConnector = document.querySelector('.connector--thick');
const middleConnector = document.querySelector('.connector--skinny');
const verticalConnector = document.querySelector('.connector--red');
const bottomConnector = document.querySelector('.connector--dashed');

// A = element, B = effect name, C = effect options, D = configuration (optional)

// create connector exit clips using factory function
//                          A             B            C   D             
const clip1 = ConnectorExit(topConnector, '~fade-out', [], {duration: 2000, playbackRate: 2});
//                          A                B         C
const clip2 = ConnectorExit(middleConnector, '~trace', ['from-B']);
//                          A                  B         C             D
const clip3 = ConnectorExit(verticalConnector, '~trace', ['from-top'], {delay: 500});
//                          A                B             C
const clip4 = ConnectorExit(bottomConnector, '~disappear', []);

// play clips (all will play at the same time because they are asynchronous)
clip1.play(); // topConnector fades out
clip2.play(); // middleConnector is erased from its point B to its point A
clip3.play(); // verticalConnector is erased starting from whichever endpoint is higher
clip4.play(); // bottomConnector disappears instantly
```
- ConnectorSetter: ((connectorElem:
      | undefined
      | null
      | Element
      | WebChalkConnectorElement, pointA: ["preserve"] | [elemA: null | Element, xPlacement: number | MultiUnitPlacementX, yPlacement: number | MultiUnitPlacementY], pointB: ["preserve"] | [elemB: null | Element, xPlacement: number | MultiUnitPlacementX, yPlacement: number | MultiUnitPlacementY], connectorConfig?: WebChalkConnectorElementConfig) => ConnectorSetterClip)
  Creates a ConnectorSetterClip, which can be used to set the endpoints of a WebChalkConnectorElement.
  - - (connectorElem, pointA, pointB, connectorConfig?): ConnectorSetterClip
    - Parameters
      connectorElem:
          | undefined
          | null
          | Element
          | WebChalkConnectorElement
      the WebChalkConnectorElement element to which the animation effect will be applied
      
      pointA: ["preserve"] | [elemA: null | Element, xPlacement: number | MultiUnitPlacementX, yPlacement: number | MultiUnitPlacementY]
      the new target of endpoint A (or "preserve" if it should not change)
      
      pointB: ["preserve"] | [elemB: null | Element, xPlacement: number | MultiUnitPlacementX, yPlacement: number | MultiUnitPlacementY]
      the new target of endpoint B (or "preserve" if it should not change)
      
      connectorConfig: WebChalkConnectorElementConfig = ...
      A WebChalkConnectorElementConfig object.
      Returns ConnectorSetterClip
      A ConnectorSetter object.
```
// retrieve connector setter clip factory function;
const { ConnectorSetter } = webchalk.createAnimationClipFactories();

// select connector elements from the DOM
const topConnector = document.querySelector('.connector--thick');
const middleConnector = document.querySelector('.connector--skinny');
const verticalConnector = document.querySelector('.connector--red');
const bottomConnector = document.querySelector('.connector--dashed');
// select other elements from the DOM
const circle1 = document.querySelector('.circle--left');
const circle2 = document.querySelector('.circle--right');

// A = connector element, B = point a, C = point b, D = configuration (optional)

// create connector setter clips using factory function
//                            A             B                           C
const clip1 = ConnectorSetter(topConnector, [circle1, 'center', 'top'], [circle2, 'center', 'top']);
//                            A                B                             C
const clip2 = ConnectorSetter(middleConnector, [circle1, 'right', 'center'], [circle2, 'left', 'center']);
//                            A                  B                                   C
const clip3 = ConnectorSetter(verticalConnector, [topConnector, 'center', 'center'], [middleConnector, 'center', 'center']);
const clip4 = ConnectorSetter(
  bottomConnector, // A
  [circle1, 'center', 'center'], // B
  [circle2, 'center', 'center'], // C
  {pointTrackingEnabled: false}, // D
);

// play clips (all will play at the same time because they are asynchronous)
// topConnector's endpoints are set to the center-tops of circle1 and circle2
clip1.play();

// middleConnector's endpoints are set to the right-center of circle1 and left-center of circle2
clip2.play();

// verticalConnector's endpoints are set to the midpoints of topConnector and middleConnector
clip3.play();

// bottomConnector's endpoints are set to the center-bottoms of circle1 and circle2,
// but its endpoints will NOT be updated if the circles move
clip4.play();

// if the connectors are then drawn using ConnectorEntrance(), their endpoints will match
// what was set according to ConnectorSetter()
```
- Emphasis: (<TComposerBank, TEffectName, TEffectComposer>(domElem: undefined | null | Element, effectName: TEffectName, effectOptions: Parameters<TEffectComposer["composeEffect"]>, effectConfig?: Partial<Layer4MutableConfig<EmphasisClip<Readonly<StripDuplicateMethodAutocompletion<{
      defaultConfig?: Partial<unknown>;
      effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
      immutableConfig?: Partial<unknown>;
      composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
          backwardKeyframesGenerator?: (...) | (...);
          backwardMutatorGenerator?: (...) | (...);
          forwardKeyframesGenerator?: (...) | (...);
          forwardMutatorGenerator?: (...) | (...);
          reverseKeyframesEffect?: (...) | (...) | (...);
          reverseMutatorEffect?: (...) | (...) | (...);
      }>;
  }>>>, TEffectComposer>>) => EmphasisClip<TEffectComposer>)
  Creates an EmphasisClip, which can be used to emphasize an element in some way (like highlighting).
  - - <TComposerBank, TEffectName, TEffectComposer>(domElem, effectName, effectOptions, effectConfig?): EmphasisClip<TEffectComposer>
    - Type Parameters
      TComposerBank extends Readonly<(IncludeLibPresets extends true
          ? {
              ~highlight: {
                  defaultConfig: {
                      cssClasses: {
                          toAddOnStart: ["webchalk-highlightable"];
                      };
                  };
                  effectCompositionFrequency: "on-every-play";
                  immutableConfig: {
                      composite: "replace";
                  };
                  composeEffect(color?: string): {
                      backwardKeyframesGenerator: (() => ((...) | (...) | (...))[]);
                      forwardKeyframesGenerator: (() => ((...) | (...) | (...))[]);
                  };
              };
              ~un-highlight: {
                  defaultConfig: {
                      cssClasses: {
                          toRemoveOnFinish: ["webchalk-highlightable"];
                      };
                  };
                  effectCompositionFrequency: "on-every-play";
                  immutableConfig: {
                      composite: "replace";
                  };
                  composeEffect(): {
                      forwardKeyframesGenerator: (() => {
                          backgroundPositionX: ...;
                      }[]);
                  };
              };
          }
          : {}) & CustomEmphasisBank>
      TEffectName extends never
      TEffectComposer extends never
      Parameters
      domElem: undefined | null | Element
      the element to which the animation effect will be applied
      
      effectName: TEffectName
      the name of the preset animation effect
      
      effectOptions: Parameters<TEffectComposer["composeEffect"]>
      array of arguments that can be used to customize the appearance of the chosen animation effect
      
      effectConfig: Partial<Layer4MutableConfig<EmphasisClip<Readonly<StripDuplicateMethodAutocompletion<{
          defaultConfig?: Partial<unknown>;
          effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
          immutableConfig?: Partial<unknown>;
          composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
              backwardKeyframesGenerator?: (...) | (...);
              backwardMutatorGenerator?: (...) | (...);
              forwardKeyframesGenerator?: (...) | (...);
              forwardMutatorGenerator?: (...) | (...);
              reverseKeyframesEffect?: (...) | (...) | (...);
              reverseMutatorEffect?: (...) | (...) | (...);
          }>;
      }>>>, TEffectComposer>> = {}
      configuration options object (EmphasisClipConfig) that defines the behavior of the clip
      Returns EmphasisClip<TEffectComposer>
      An EmphasisClip object.
```
// retrieve emphasis clip factory function;
const { Emphasis } = webchalk.createAnimationClipFactories();

// select element from the DOM
const importantText = document.querySelector('.important-text');

// A = element, B = effect name, C = effect options, D = configuration (optional)

// create emphasis clip using factory function
const clip1 = Emphasis(
  importantText, // A
  '~highlight', // B
  ['yellow'], // C
  { // D
    cssClasses: {toAddOnStart: ['.bold', '.italics']},
    duration: 1000,
  },
);

// play clip
clip1.play();
```
- Entrance: (<TComposerBank, TEffectName, TEffectComposer>(domElem: undefined | null | Element, effectName: TEffectName, effectOptions: Parameters<TEffectComposer["composeEffect"]>, effectConfig?: Partial<Layer4MutableConfig<EntranceClip<Readonly<StripDuplicateMethodAutocompletion<{
      defaultConfig?: Partial<unknown>;
      effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
      immutableConfig?: Partial<unknown>;
      composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
          backwardKeyframesGenerator?: (...) | (...);
          backwardMutatorGenerator?: (...) | (...);
          forwardKeyframesGenerator?: (...) | (...);
          forwardMutatorGenerator?: (...) | (...);
          reverseKeyframesEffect?: (...) | (...) | (...);
          reverseMutatorEffect?: (...) | (...) | (...);
      }>;
  }>>>, TEffectComposer>>) => EntranceClip<TEffectComposer>)
  Creates an EntranceClip, which can be used to reveal an element that was hidden.
  Example
```
// retrieve entrance clip factory function;
const { Entrance } = webchalk.createAnimationClipFactories();

// select elements from the DOM
const square = document.querySelector('.square');
const circle = document.querySelector('.circle');
const triangle = document.querySelector('.triangle');

// A = element, B = effect name, C = effect options, D = configuration (optional)

// create three entrance clips using factory function
//                     A       B          C
const clip1 = Entrance(square, '~appear', []);
//                     A       B          C              D
const clip2 = Entrance(circle, '~fly-in', ['from-left'], {duration: 2000, easing: 'ease-out'});
//                     A         B            C                 D
const clip3 = Entrance(triangle, '~pinwheel', [2, 'clockwise'], {playbackRate: 2, delay: 1000});

// play clips (all will play at the same time because they are asynchronous)
clip1.play();
clip2.play();
clip3.play();
```
  - - <TComposerBank, TEffectName, TEffectComposer>(domElem, effectName, effectOptions, effectConfig?): EntranceClip<TEffectComposer>
    - Type Parameters
      TComposerBank extends Readonly<(IncludeLibPresets extends true
          ? {
              ~appear: {
                  defaultConfig: {};
                  effectCompositionFrequency: "on-first-play-only";
                  immutableConfig: {
                      composite: "replace";
                      duration: 0;
                      easing: "linear";
                  };
                  composeEffect(): {};
              };
              ~fade-in: {
                  defaultConfig: {};
                  effectCompositionFrequency: "on-first-play-only";
                  immutableConfig: {
                      composite: "replace";
                  };
                  composeEffect(): {
                      forwardKeyframesGenerator: (() => ((...) | (...))[]);
                  };
              };
              ~fly-in: {
                  defaultConfig: {
                      composite: "accumulate";
                  };
                  effectCompositionFrequency: "on-first-play-only";
                  immutableConfig: {};
                  composeEffect(direction?:
                      | "from-left"
                      | "from-top"
                      | "from-bottom"
                      | "from-right"
                      | "from-top-left"
                      | "from-top-right"
                      | "from-bottom-left"
                      | "from-bottom-right"): {
                      forwardKeyframesGenerator: (() => {
                          translate: ...;
                      }[]);
                  };
              };
              ~pinwheel: {
                  defaultConfig: {};
                  effectCompositionFrequency: "on-first-play-only";
                  immutableConfig: {};
                  composeEffect(numSpins?: number, direction?: "clockwise" | "counterclockwise"): {
                      forwardKeyframesGenerator: (() => ((...) | (...))[]);
                  };
              };
              ~rise-up: {
                  defaultConfig: {
                      composite: "accumulate";
                  };
                  effectCompositionFrequency: "on-first-play-only";
                  immutableConfig: {};
                  composeEffect(): {
                      forwardKeyframesGenerator: (() => (
                          | (...)
                          | (...)
                          | (...)
                          | (...))[]);
                  };
              };
              ~slide-in: {
                  defaultConfig: {
                      duration: 100;
                  };
                  effectCompositionFrequency: "on-first-play-only";
                  immutableConfig: {
                      composite: "accumulate";
                  };
                  composeEffect(direction?:
                      | "from-left"
                      | "from-top"
                      | "from-bottom"
                      | "from-right"): {
                      forwardKeyframesGenerator: (() => (
                          | (...)
                          | (...)
                          | (...)
                          | (...))[]);
                  };
              };
              ~wipe: {
                  defaultConfig: {};
                  effectCompositionFrequency: "on-first-play-only";
                  immutableConfig: {
                      composite: "replace";
                  };
                  composeEffect(direction?:
                      | "from-left"
                      | "from-top"
                      | "from-bottom"
                      | "from-right"): {
                      forwardKeyframesGenerator: (() => Keyframe[]);
                  };
              };
          }
          : {}) & CustomEntranceBank>
      TEffectName extends never
      TEffectComposer extends never
      Parameters
      domElem: undefined | null | Element
      the element to which the animation effect will be applied
      
      effectName: TEffectName
      the name of the preset animation effect
      
      effectOptions: Parameters<TEffectComposer["composeEffect"]>
      array of arguments that can be used to customize the appearance of the chosen animation effect
      
      effectConfig: Partial<Layer4MutableConfig<EntranceClip<Readonly<StripDuplicateMethodAutocompletion<{
          defaultConfig?: Partial<unknown>;
          effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
          immutableConfig?: Partial<unknown>;
          composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
              backwardKeyframesGenerator?: (...) | (...);
              backwardMutatorGenerator?: (...) | (...);
              forwardKeyframesGenerator?: (...) | (...);
              forwardMutatorGenerator?: (...) | (...);
              reverseKeyframesEffect?: (...) | (...) | (...);
              reverseMutatorEffect?: (...) | (...) | (...);
          }>;
      }>>>, TEffectComposer>> = {}
      configuration options object (EntranceClipConfig) that defines the behavior of the clip
      Returns EntranceClip<TEffectComposer>
      An EntranceClip object.
- Exit: (<TComposerBank, TEffectName, TEffectComposer>(domElem: undefined | null | Element, effectName: TEffectName, effectOptions: Parameters<TEffectComposer["composeEffect"]>, effectConfig?: Partial<Layer4MutableConfig<ExitClip<Readonly<StripDuplicateMethodAutocompletion<{
      defaultConfig?: Partial<unknown>;
      effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
      immutableConfig?: Partial<unknown>;
      composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
          backwardKeyframesGenerator?: (...) | (...);
          backwardMutatorGenerator?: (...) | (...);
          forwardKeyframesGenerator?: (...) | (...);
          forwardMutatorGenerator?: (...) | (...);
          reverseKeyframesEffect?: (...) | (...) | (...);
          reverseMutatorEffect?: (...) | (...) | (...);
      }>;
  }>>>, TEffectComposer>>) => ExitClip<TEffectComposer>)
  Creates an ExitClip, which can be used to unrender or make invisible an element.
  - - <TComposerBank, TEffectName, TEffectComposer>(domElem, effectName, effectOptions, effectConfig?): ExitClip<TEffectComposer>
    - Type Parameters
      TComposerBank extends Readonly<(IncludeLibPresets extends true
          ? {
              ~disappear: {
                  defaultConfig: {};
                  effectCompositionFrequency: "on-first-play-only";
                  immutableConfig: {
                      composite: "replace";
                      duration: 0;
                      easing: "linear";
                  };
                  composeEffect(): {};
              };
              ~fade-out: {
                  defaultConfig: {};
                  effectCompositionFrequency: "on-first-play-only";
                  immutableConfig: {
                      composite: "replace";
                  };
                  composeEffect(): {
                      forwardKeyframesGenerator: (() => ((...) | (...))[]);
                  };
              };
              ~fly-out: {
                  defaultConfig: {};
                  effectCompositionFrequency: "on-first-play-only";
                  immutableConfig: {
                      composite: "accumulate";
                  };
                  composeEffect(direction?:
                      | "to-left"
                      | "to-top"
                      | "to-bottom"
                      | "to-right"
                      | "to-top-left"
                      | "to-top-right"
                      | "to-bottom-left"
                      | "to-bottom-right"): {
                      forwardKeyframesGenerator: (() => {
                          translate: ...;
                      }[]);
                  };
              };
              ~pinwheel: {
                  defaultConfig: {};
                  effectCompositionFrequency: "on-first-play-only";
                  immutableConfig: {};
                  composeEffect(numSpins?: number, direction?: "clockwise" | "counterclockwise"): {
                      forwardKeyframesGenerator: (() => ((...) | (...))[]);
                  };
              };
              ~sink-down: {
                  defaultConfig: {};
                  effectCompositionFrequency: "on-first-play-only";
                  immutableConfig: {
                      composite: "accumulate";
                  };
                  composeEffect(): {
                      forwardKeyframesGenerator: (() => (
                          | (...)
                          | (...)
                          | (...)
                          | (...))[]);
                      reverseKeyframesEffect: true;
                  };
              };
              ~slide-out: {
                  defaultConfig: {
                      duration: 100;
                  };
                  effectCompositionFrequency: "on-first-play-only";
                  immutableConfig: {
                      composite: "accumulate";
                  };
                  composeEffect(direction?:
                      | "to-left"
                      | "to-top"
                      | "to-bottom"
                      | "to-right"): {
                      forwardKeyframesGenerator: (() => (
                          | (...)
                          | (...)
                          | (...)
                          | (...))[]);
                  };
              };
              ~wipe: {
                  defaultConfig: {};
                  effectCompositionFrequency: "on-first-play-only";
                  immutableConfig: {
                      composite: "replace";
                  };
                  composeEffect(direction?:
                      | "from-left"
                      | "from-top"
                      | "from-bottom"
                      | "from-right"): {
                      forwardKeyframesGenerator: (() => Keyframe[]);
                  };
              };
          }
          : {}) & CustomExitBank>
      TEffectName extends never
      TEffectComposer extends never
      Parameters
      domElem: undefined | null | Element
      the element to which the animation effect will be applied
      
      effectName: TEffectName
      the name of the preset animation effect
      
      effectOptions: Parameters<TEffectComposer["composeEffect"]>
      array of arguments that can be used to customize the appearance of the chosen animation effect
      
      effectConfig: Partial<Layer4MutableConfig<ExitClip<Readonly<StripDuplicateMethodAutocompletion<{
          defaultConfig?: Partial<unknown>;
          effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
          immutableConfig?: Partial<unknown>;
          composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
              backwardKeyframesGenerator?: (...) | (...);
              backwardMutatorGenerator?: (...) | (...);
              forwardKeyframesGenerator?: (...) | (...);
              forwardMutatorGenerator?: (...) | (...);
              reverseKeyframesEffect?: (...) | (...) | (...);
              reverseMutatorEffect?: (...) | (...) | (...);
          }>;
      }>>>, TEffectComposer>> = {}
      configuration options object (ExitClipConfig) that defines the behavior of the clip
      Returns ExitClip<TEffectComposer>
      An ExitClip object.
```
// retrieve exit clip factory function;
const { Exit } = webchalk.createAnimationClipFactories();

// select elements from the DOM
const square = document.querySelector('.square');
const circle = document.querySelector('.circle');
const triangle = document.querySelector('.triangle');

// A = element, B = effect name, C = effect options, D = configuration (optional)

// create three exit clips using factory function
//                 A       B             C
const clip1 = Exit(square, '~disappear', []);
//                 A       B           C            D
const clip2 = Exit(circle, '~fly-out', ['to-left'], {duration: 2000, easing: 'ease-in'});
//                 A         B            C                        D
const clip3 = Exit(triangle, '~pinwheel', [2, 'counterclockwise'], {playbackRate: 2, delay: 1000});

// play clips (all will play at the same time because they are asynchronous)
clip1.play();
clip2.play();
clip3.play();
```
- Motion: (<TComposerBank, TEffectName, TEffectComposer>(domElem: undefined | null | Element, effectName: TEffectName, effectOptions: Parameters<TEffectComposer["composeEffect"]>, effectConfig?: Partial<Layer4MutableConfig<MotionClip<Readonly<StripDuplicateMethodAutocompletion<{
      defaultConfig?: Partial<unknown>;
      effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
      immutableConfig?: Partial<unknown>;
      composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
          backwardKeyframesGenerator?: (...) | (...);
          backwardMutatorGenerator?: (...) | (...);
          forwardKeyframesGenerator?: (...) | (...);
          forwardMutatorGenerator?: (...) | (...);
          reverseKeyframesEffect?: (...) | (...) | (...);
          reverseMutatorEffect?: (...) | (...) | (...);
      }>;
  }>>>, TEffectComposer>>) => MotionClip<TEffectComposer>)
  Creates a MotionClip.
  - - <TComposerBank, TEffectName, TEffectComposer>(domElem, effectName, effectOptions, effectConfig?): MotionClip<TEffectComposer>
    - Type Parameters
      TComposerBank extends Readonly<(IncludeLibPresets extends true
          ? {
              ~move-to: {
                  defaultConfig: {};
                  effectCompositionFrequency: "on-every-play";
                  immutableConfig: {
                      composite: "accumulate";
                  };
                  composeEffect(targetElem: undefined | null | Element, translationOptions?: Partial<MoveToOptions>): {
                      backwardKeyframesGenerator: (() => {
                          translate: ...;
                      }[]);
                      forwardKeyframesGenerator: (() => {
                          translate: ...;
                      }[]);
                  };
              };
              ~translate: {
                  defaultConfig: {
                      composite: "accumulate";
                  };
                  effectCompositionFrequency: "on-first-play-only";
                  immutableConfig: {};
                  composeEffect(translationOptions?: Partial<TranslateOptions>): {
                      backwardKeyframesGenerator: (() => {
                          translate: ...;
                      }[]);
                      forwardKeyframesGenerator: (() => {
                          translate: ...;
                      }[]);
                  };
              };
          }
          : {}) & CustomMotionBank>
      TEffectName extends never
      TEffectComposer extends never
      Parameters
      domElem: undefined | null | Element
      the element to which the animation effect will be applied
      
      effectName: TEffectName
      the name of the preset animation effect
      
      effectOptions: Parameters<TEffectComposer["composeEffect"]>
      array of arguments that can be used to customize the appearance of the chosen animation effect
      
      effectConfig: Partial<Layer4MutableConfig<MotionClip<Readonly<StripDuplicateMethodAutocompletion<{
          defaultConfig?: Partial<unknown>;
          effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
          immutableConfig?: Partial<unknown>;
          composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
              backwardKeyframesGenerator?: (...) | (...);
              backwardMutatorGenerator?: (...) | (...);
              forwardKeyframesGenerator?: (...) | (...);
              forwardMutatorGenerator?: (...) | (...);
              reverseKeyframesEffect?: (...) | (...) | (...);
              reverseMutatorEffect?: (...) | (...) | (...);
          }>;
      }>>>, TEffectComposer>> = {}
      configuration options object (MotionClipConfig) that defines the behavior of the clip
      Returns MotionClip<TEffectComposer>
      A MotionClip object.
```
// retrieve motion clip factory function;
const { Motion } = webchalk.createAnimationClipFactories();

// select elements from the DOM
const square = document.querySelector('.square');
const circle = document.querySelector('.circle');
const triangle = document.querySelector('.triangle');

// A = element, B = effect name, C = effect options, D = configuration (optional)

// create motion clips using factory function
//                   A       B             C
const clip1 = Motion(square, '~translate', [{translate: '200px 300rem'}]);
//                   A       B           C
const clip2 = Motion(circle, '~move-to', [document.querySelector('body'), {alignment: 'center center'}]);
//                   A         B           C                                                             D
const clip3 = Motion(triangle, '~move-to', [circle, {alignment: 'center top', selfOffset: '0% -100%'}], {duration: 2000});

// play clips one at a time
(async() => {
  await clip1.play(); // square moves 200px right and 300rem down
  await clip2.play(); // circle moves to center itself horizontally and vertically with the <body>
  await clip3.play(); // triangle moves to sit on top of the circle, horizontally centered
})()
```
- Scroller: (<TComposerBank, TEffectName, TEffectComposer>(domElem: undefined | null | Element, effectName: TEffectName, effectOptions: Parameters<TEffectComposer["composeEffect"]>, effectConfig?: Partial<Layer4MutableConfig<ScrollerClip<Readonly<StripDuplicateMethodAutocompletion<{
      defaultConfig?: Partial<unknown>;
      effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
      immutableConfig?: Partial<unknown>;
      composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
          backwardKeyframesGenerator?: (...) | (...);
          backwardMutatorGenerator?: (...) | (...);
          forwardKeyframesGenerator?: (...) | (...);
          forwardMutatorGenerator?: (...) | (...);
          reverseKeyframesEffect?: (...) | (...) | (...);
          reverseMutatorEffect?: (...) | (...) | (...);
      }>;
  }>>>, TEffectComposer>>) => ScrollerClip<TEffectComposer>)
  Creates an ScrollerClip, which can be used to scroll an element.
  - - <TComposerBank, TEffectName, TEffectComposer>(domElem, effectName, effectOptions, effectConfig?): ScrollerClip<TEffectComposer>
    - Type Parameters
      TComposerBank extends Readonly<(IncludeLibPresets extends true
          ? {
              ~scroll-self: {
                  defaultConfig: {};
                  effectCompositionFrequency: "on-first-play-only";
                  immutableConfig: {
                      composite: "replace";
                  };
                  composeEffect(target: undefined | null | Element, scrollOptions?: Partial<ScrollingOptions>): {
                      backwardMutatorGenerator: (() => (() => void));
                      forwardMutatorGenerator: (() => (() => void));
                  };
              };
          }
          : {}) & _EmptyScrollerBank>
      TEffectName extends never
      TEffectComposer extends never
      Parameters
      domElem: undefined | null | Element
      the element to which the animation effect will be applied
      
      effectName: TEffectName
      the name of the preset animation effect
      
      effectOptions: Parameters<TEffectComposer["composeEffect"]>
      array of arguments that can be used to customize the appearance of the chosen animation effect
      
      effectConfig: Partial<Layer4MutableConfig<ScrollerClip<Readonly<StripDuplicateMethodAutocompletion<{
          defaultConfig?: Partial<unknown>;
          effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
          immutableConfig?: Partial<unknown>;
          composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
              backwardKeyframesGenerator?: (...) | (...);
              backwardMutatorGenerator?: (...) | (...);
              forwardKeyframesGenerator?: (...) | (...);
              forwardMutatorGenerator?: (...) | (...);
              reverseKeyframesEffect?: (...) | (...) | (...);
              reverseMutatorEffect?: (...) | (...) | (...);
          }>;
      }>>>, TEffectComposer>> = {}
      configuration options object (ScrollerClipConfig) that defines the behavior of the clip
      Returns ScrollerClip<TEffectComposer>
      An ScrollerClip object.
```
// retrieve scroller clip factory function;
const { Scroller } = webchalk.createAnimationClipFactories();

// select elements from the DOM
const sideBar = document.querySelector('.side-bar');
const mainPage = document.querySelector('.main');

// A = element, B = effect name, C = effect options, D = configuration (optional)

// create scroller clips using factory function
//                     A        B               C                                          D
const clip1 = Scroller(sideBar, '~scroll-self', [sideBar?.querySelector('.contact-link')], {duration: 1000});
const clip2 = Scroller(
  mainPage, // A
  '~scroll-self', // B
  [ // C
    mainPage?.querySelector('.testimonials'),
    {
      scrollableOffset: ['0px', 'center'],
      targetOffset: ['0px', 'top'],
    },
  ],
  { // D
    duration: 2000,
    easing: 'ease-in-out'
  },
);

// play clips one at a time
(async() => {
  // side bar scrolls to a presumed contact link
  await clip1.play();
  // main page scrolls to a presumed testimonials section.
  // the top of the testimonials section aligns with the center of the page
  await clip2.play();
})();
```
- Transition: (<TComposerBank, TEffectName, TEffectComposer>(domElem: undefined | null | Element, effectName: TEffectName, effectOptions: Parameters<TEffectComposer["composeEffect"]>, effectConfig?: Partial<Layer4MutableConfig<TransitionClip<Readonly<StripDuplicateMethodAutocompletion<{
      defaultConfig?: Partial<unknown>;
      effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
      immutableConfig?: Partial<unknown>;
      composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
          backwardKeyframesGenerator?: (...) | (...);
          backwardMutatorGenerator?: (...) | (...);
          forwardKeyframesGenerator?: (...) | (...);
          forwardMutatorGenerator?: (...) | (...);
          reverseKeyframesEffect?: (...) | (...) | (...);
          reverseMutatorEffect?: (...) | (...) | (...);
      }>;
  }>>>, TEffectComposer>>) => TransitionClip<TEffectComposer>)
  Creates a TransitionClip, which can be used to make an element transition to or from a given Keyframe.
  - - <TComposerBank, TEffectName, TEffectComposer>(domElem, effectName, effectOptions, effectConfig?): TransitionClip<TEffectComposer>
    - Type Parameters
      TComposerBank extends Readonly<(IncludeLibPresets extends true
          ? {
              ~from: {
                  defaultConfig: {};
                  effectCompositionFrequency: "on-first-play-only";
                  immutableConfig: {
                      commitsStyles: false;
                  };
                  composeEffect(keyframe: Keyframe): {
                      forwardKeyframesGenerator: (() => {
                          composite?: ...;
                          easing?: ...;
                          offset?: ...;
                      }[]);
                  };
              };
              ~to: {
                  defaultConfig: {};
                  effectCompositionFrequency: "on-every-play";
                  immutableConfig: {};
                  composeEffect(keyframe: Keyframe): {
                      forwardKeyframesGenerator: (() => {}[]);
                  };
              };
          }
          : {}) & _EmptyTransitionBank>
      TEffectName extends never
      TEffectComposer extends never
      Parameters
      domElem: undefined | null | Element
      the element to which the animation effect will be applied
      
      effectName: TEffectName
      the name of the preset animation effect
      
      effectOptions: Parameters<TEffectComposer["composeEffect"]>
      array of arguments that can be used to customize the appearance of the chosen animation effect
      
      effectConfig: Partial<Layer4MutableConfig<TransitionClip<Readonly<StripDuplicateMethodAutocompletion<{
          defaultConfig?: Partial<unknown>;
          effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
          immutableConfig?: Partial<unknown>;
          composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
              backwardKeyframesGenerator?: (...) | (...);
              backwardMutatorGenerator?: (...) | (...);
              forwardKeyframesGenerator?: (...) | (...);
              forwardMutatorGenerator?: (...) | (...);
              reverseKeyframesEffect?: (...) | (...) | (...);
              reverseMutatorEffect?: (...) | (...) | (...);
          }>;
      }>>>, TEffectComposer>> = {}
      configuration options object (TransitionClipConfig) that defines the behavior of the clip
      Returns TransitionClip<TEffectComposer>
      A TransitionClip object.
```
// retrieve transition clip factory function;
const { Transition } = webchalk.createAnimationClipFactories();

// select elements from the DOM
const square = document.querySelector('.square');
const textBox = document.querySelector('.text-box');
const triangle = document.querySelector('.triangle');

// A = element, B = effect name, C = effect options, D = configuration (optional)

// create transition clips using factory function
//                       A       B      C                                              D
const clip1 = Transition(square, '~to', [{backgroundColor: 'lightred', width: '50%'}], {duration: 1000});
//                       A        B      C
const clip2 = Transition(textBox, '~to', [{fontSize: '30px', color: 'blue'}]);
//                       A         B        C
const clip3 = Transition(triangle, '~from', [{opacity: '0'}]);

// play clips (all will play at the same time because they are asynchronous)
clip1.play(); // square transitions to turn red and shrink to half width
clip2.play(); // text box font size transitions to have font size of 30px and text color blue
clip3.play(); // triangle transitions FROM 0 opacity to its current opacity
```
Example
```
const square = document.querySelector('.square');
// Using the method and using one of the `Entrance()` factory function
const clipFactories = webchalk.createAnimationClipFactories();
const ent = clipFactories.Entrance(square, '~fly-in', ['from-top'], {duration: 2000});
ent.play();
```
Example
```
const square = document.querySelector('.square');
// Using destructuring assignment to conveniently extract the `Entrance()` and `Motion()` factory functions
const {Entrance, Motion} = webchalk.createAnimationClipFactories();
const ent = Entrance(square, '~fly-in', ['from-top'], {duration: 2000});
const mot1 = Motion(square, '~translate', [{translate: '500px 0px'}], {duration: 1000});
const mot2 = Motion(square, '~translate', [{translate: '0px 500px'}], {duration: 500});
// clips are added to a sequence
const seq = webchalk.newSequence(ent, mot1, mot2);
seq.play();
```
Example
```
// Extending the preset entrances and motions banks with custom effects
const clipFactories = webchalk.createAnimationClipFactories({
  // CUSTOM ENTRANCES
  customEntranceEffects: {
    coolZoomIn: {
      composeEffect(initialScale: number) {
        return {
          forwardKeyframesGenerator: () => [
            {scale: initialScale, opacity: 0},
            {scale: 1, opacity: 1}
          ],
          // (backwardFrames could have been omitted in this case because
          // the reversal of forwardFrames is exactly equivalent)
          backwardKeyframesGenerator: () => [
            {scale: 1, opacity: 1},
            {scale: initialScale, opacity: 0}
          ]
        };
      }
    },

    blinkIn: {
      composeEffect() {
        return {
          forwardKeyframesGenerator: () => [
            {opacity: 0}, {opacity: 1}, {opacity: 0}, {opacity: 1}, {opacity: 0}, {opacity: 1}
          ],
          // (backwardKeyframesGenerator() omitted because the reversal of
          // forwardKeyframesGenerator() is exactly equivalent)
        };
      }
    }
  },

  // CUSTOM EXITS
  customExitEffects: {
    // a custom animation effect for flying out to the left side of the screen
    flyOutLeft: {
      composeEffect() {
        const computeTranslationStr = () => {
          const orthogonalDistance = -(this.domElem.getBoundingClientRect().right);
          const translationString = `${orthogonalDistance}px 0px`;
          return translationString;
        }
  
        return {
          forwardKeyframesGenerator: () => {
            return [
              {translate: computeTranslationStr()}
            ];
          },
          // backwardKeyframesGenerator could have been omitted because the result
          // of running forwardKeyframesGenerator() again and reversing the keyframes
          // produces the same desired rewinding effect in this case
          backwardKeyframesGenerator: () => {
            return [
              {translate: computeTranslationStr()},
              {translate: `0 0`}
            ];
          }
        };
      },
      
      immutableConfig: {
        // this means that the translation is added onto the element's position
        // instead of replacing it
        composite: 'accumulate',
      }
    },
  }
});

const square = document.querySelector('.square');
// the custom animations you created are now valid as well as detected by TypeScript
const ent1 = clipFactories.Entrance(square, 'coolZoomIn', [0.2]);
const ent2 = clipFactories.Entrance(square, 'blinkIn', []);
const ext = clipFactories.Exit(square, 'flyOutLeft', []);
```
- Defined in src/WebChalk.ts:333

newSequence

newSequence(config, ...animClips): AnimSequence

Creates a new AnimSequence with configuration options specified in the config parameter followed by an optional list of animation clips.

Parameters

config: Partial<AnimSequenceConfig>
configuration options for the sequence
Rest...animClips: AnimClip<Readonly<StripDuplicateMethodAutocompletion<{
    defaultConfig?: Partial<unknown>;
    effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
    immutableConfig?: Partial<unknown>;
    composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
        backwardKeyframesGenerator?: (() => Keyframes);
        backwardMutatorGenerator?: (() => Mutator);
        forwardKeyframesGenerator?: (() => Keyframes);
        forwardMutatorGenerator?: (() => Mutator);
        reverseKeyframesEffect?: boolean;
        reverseMutatorEffect?: boolean;
    }>;
}>>, AnimClipConfig>[]
optional comma-separated list of AnimClips to add to the sequence

Returns AnimSequence

A new AnimSequence instance.

Example

// retrieve clip factory functions
const clipFactories = webchalk.createAnimationClipFactories();
// select a (presumable) square-shaped element from the DOM
const squareEl = document.querySelector(".square");

// create sequence with some configuration options and some animation clips
const seq = webchalk.newSequence(
  { description: "Fade in square, move it, and fade out", playbackRate: 2 },
  clipFactories.Entrance(squareEl, "~fade-in", []),
  clipFactories.Motion(squareEl, "~translate", [{ translate: "200px 500px" }]),
  clipFactories.Exit(squareEl, "~fade-out", [])
);
// play sequence
seq.play();

Example

// SAME EXAMPLE BUT WITH DESTRUCTURING ASSIGNMENT FOR THE CLIP FACTORY FUNCTIONS

const {Entrance, Exit, Motion} = webchalk.createAnimationClipFactories();
const squareEl = document.querySelector('.square');

const seq = webchalk.newSequence(
  {description: 'Fade in square, move it, and fade out', playbackRate: 2},
  Entrance(squareEl, '~fade-in', []),
  Motion(squareEl, '~translate', [{translate: '200px 500px'}]),
  Exit(squareEl, '~fade-out', []),
);
seq.play();

newSequence(...animClips): AnimSequence

Creates a new AnimSequence instance with an optional list of animation clips.

Parameters

Rest...animClips: AnimClip<Readonly<StripDuplicateMethodAutocompletion<{
    defaultConfig?: Partial<unknown>;
    effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
    immutableConfig?: Partial<unknown>;
    composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
        backwardKeyframesGenerator?: (() => Keyframes);
        backwardMutatorGenerator?: (() => Mutator);
        forwardKeyframesGenerator?: (() => Keyframes);
        forwardMutatorGenerator?: (() => Mutator);
        reverseKeyframesEffect?: boolean;
        reverseMutatorEffect?: boolean;
    }>;
}>>, AnimClipConfig>[]
optional comma-separated list of AnimClips to add to the sequence

Returns AnimSequence

A new AnimSequence instance.

Example

// retrieve clip factory functions
const clipFactories = webchalk.createAnimationClipFactories();
// select a (presumable) square-shaped element from the DOM
const squareEl = document.querySelector('.square');

// create sequence with some animation clips
const seq = webchalk.newSequence(
   clipFactories.Entrance(squareEl, '~fade-in', []),
   clipFactories.Motion(squareEl, '~translate', [{translate: '200px 500px'}]),
   clipFactories.Exit(squareEl, '~fade-out', []),
);
// play sequence
seq.play();

Example

// SAME EXAMPLE BUT WITH DESTRUCTURING ASSIGNMENT FOR THE CLIP FACTORY FUNCTIONS

const {Entrance, Exit, Motion} = webchalk.createAnimationClipFactories();
const squareEl = document.querySelector('.square');

const seq = webchalk.newSequence(
   Entrance(squareEl, '~fade-in', []),
   Motion(squareEl, '~translate', [{translate: '200px 500px'}]),
   Exit(squareEl, '~fade-out', []),
);
seq.play();

newTimeline

newTimeline(config, ...animSequences): AnimTimeline

Creates a new AnimTimeline with configuration options specified in the config parameter followed by an optional list of animation sequences.

Parameters

config: Partial<AnimTimelineConfig>
configuration options for the timeline
Rest...animSequences: AnimSequence[]
optional comma-separated list of AnimSequences to add to the timeline

Returns AnimTimeline

A new AnimTimeline instance.

Example

// retrieve some clip factory functions
const {Entrance, Exit, Motion} = webchalk.createAnimationClipFactories();
// select presumably a square element and a circle element from the DOM
const squareEl = document.querySelector('.square');
const circleEl = document.querySelector('.circle');

// create first sequence
const seq1 = webchalk.newSequence(
   {description: 'Fade in square, move it, and fade out', playbackRate: 2},
   Entrance(squareEl, '~fade-in', []),
   Motion(squareEl, '~translate', [{translate: '200px 500px'}]),
   Exit(squareEl, '~fade-out', []),
);

// create second sequence
const seq2 = webchalk.newSequence(
   {description: 'Fade in circle and move it'},
   Entrance(circleEl, '~fly-in', ['from-left']),
   Motion(circleEl, '~translate', [{translate: '250px 0px'}]),
);

// create timeline with some configuration and both sequences
const timeline = webchalk.newTimeline(
   {timelineName: 'Moving Shapes', autoLinksButtons: true},
   seq1,
   seq2,
);

// step forward twice, playing both sequences
timeline.step('forward')
  .then(() => timeline.step('forward'));

newTimeline(...animSequences): AnimTimeline

Creates a new AnimTimeline with with an optional list of animation sequences.

Parameters

Rest...animSequences: AnimSequence[]
optional comma-separated list of AnimSequences to add to the timeline

Returns AnimTimeline

A new AnimTimeline instance.

Example

// retrieve some clip factory functions
const {Entrance, Exit, Motion} = webchalk.createAnimationClipFactories();
// select presumably a square element and a circle element from the DOM
const squareEl = document.querySelector('.square');
const circleEl = document.querySelector('.circle');

// create first sequence
const seq1 = webchalk.newSequence(
  {description: 'Fade in square, move it, and fade out', playbackRate: 2},
  Entrance(squareEl, '~fade-in', []),
  Motion(squareEl, '~translate', [{translate: '200px 500px'}]),
  Exit(squareEl, '~fade-out', []),
);

// create second sequence
const seq2 = webchalk.newSequence(
  {description: 'Fade in circle and move it'},
  Entrance(circleEl, '~fly-in', ['from-left']),
  Motion(circleEl, '~translate', [{translate: '250px 0px'}]),
);

// create timeline with both sequences
const timeline = webchalk.newTimeline(
   seq1,
   seq2,
);

Class WebChalk

Index

Methods

Methods

createAnimationClipFactories

Type Parameters

Parameters

Default Value

Type Parameters

Parameters

Returns ConnectorEntranceClip<TEffectComposer>

Type Parameters

Parameters

Returns ConnectorExitClip<TEffectComposer>

Parameters

Returns ConnectorSetterClip

Type Parameters

Parameters

Returns EmphasisClip<TEffectComposer>

Example

Type Parameters

Parameters

Returns EntranceClip<TEffectComposer>

Type Parameters

Parameters

Returns ExitClip<TEffectComposer>

Type Parameters

Parameters

Returns MotionClip<TEffectComposer>

Type Parameters

Parameters

Returns ScrollerClip<TEffectComposer>

Type Parameters

Parameters

Returns TransitionClip<TEffectComposer>

Example

Example

Example

newSequence

Parameters

Returns AnimSequence

Example

Example

Parameters

Returns AnimSequence

Example

Example

newTimeline

Parameters

Returns AnimTimeline

Example

Parameters

Returns AnimTimeline

Example

Settings

On This Page