Interface WebchalkPresetTransitionEffects

defaultConfig: {}

howOftenBuildGenerators: "on-first-play-only"

immutableConfig: { commitsStyles: false }

buildFrameGenerators: function

• buildFrameGenerators(
      this: Readonly<
          Pick<
              TransitionClip<
                  Readonly<
                      StripDuplicateMethodAutocompletion<
                          {
                              defaultConfig?: Partial<(...)> & object;
                              howOftenBuildGenerators?: "on-first-play-only" | "on-every-play";
                              immutableConfig?: Partial<(...)> & object;
                              buildFrameGenerators(
                                  this: Readonly<Pick<AnimClip<(...), (...)>, "computeTween">>,
                                  ...effectOptions: unknown[],
                              ): EffectFrameGeneratorSet;
                          },
                      >,
                  >,
              >,
              "domElem"
              | "getEffectDetails"
              | "getStatus"
              | "getStyles"
              | "getTiming",
          >,
      > & Readonly<
          Pick<
              AnimClip<
                  Readonly<
                      StripDuplicateMethodAutocompletion<
                          {
                              defaultConfig?: Partial<(...)> & object;
                              howOftenBuildGenerators?: "on-first-play-only" | "on-every-play";
                              immutableConfig?: Partial<(...)> & object;
                              buildFrameGenerators(
                                  this: Readonly<Pick<AnimClip<Readonly<StripDuplicateMethodAutocompletion<{ defaultConfig?: (Partial<unknown> & object) | undefined; immutableConfig?: (Partial<unknown> & object) | undefined; howOftenBuildGenerators?: "on-first-play-only" | "on-every-play" | undefined; buildFrameGenerators(this: Readonly<Pick<AnimClip<Readonly<StripDuplicateMethodAutocompletion<any>>, AnimClipConfig>, "computeTween">>, ...effectOptions: unknown[]): EffectFrameGeneratorSet; }>>, AnimClipConfig>, "computeTween">>,
                                  ...effectOptions: unknown[],
                              ): EffectFrameGeneratorSet;
                          },
                      >,
                  >,
                  AnimClipConfig,
              >,
              "computeTween",
          >,
      >,
      keyframe: Keyframe,
  ): {
      keyframesGenerator_play: () => {
          composite?: CompositeOperationOrAuto;
          easing?: string;
          offset?: number
          | null;
          [property: string]: string | number | null | undefined;
      }[];
  }

  Parameters

  • this: Readonly<
        Pick<
            TransitionClip<
                Readonly<
                    StripDuplicateMethodAutocompletion<
                        {
                            defaultConfig?: Partial<(...)> & object;
                            howOftenBuildGenerators?: "on-first-play-only" | "on-every-play";
                            immutableConfig?: Partial<(...)> & object;
                            buildFrameGenerators(
                                this: Readonly<Pick<AnimClip<(...), (...)>, "computeTween">>,
                                ...effectOptions: unknown[],
                            ): EffectFrameGeneratorSet;
                        },
                    >,
                >,
            >,
            "domElem"
            | "getEffectDetails"
            | "getStatus"
            | "getStyles"
            | "getTiming",
        >,
    > & Readonly<
        Pick<
            AnimClip<
                Readonly<
                    StripDuplicateMethodAutocompletion<
                        {
                            defaultConfig?: Partial<(...)> & object;
                            howOftenBuildGenerators?: "on-first-play-only" | "on-every-play";
                            immutableConfig?: Partial<(...)> & object;
                            buildFrameGenerators(
                                this: Readonly<Pick<AnimClip<Readonly<StripDuplicateMethodAutocompletion<{ defaultConfig?: (Partial<unknown> & object) | undefined; immutableConfig?: (Partial<unknown> & object) | undefined; howOftenBuildGenerators?: "on-first-play-only" | "on-every-play" | undefined; buildFrameGenerators(this: Readonly<Pick<AnimClip<Readonly<StripDuplicateMethodAutocompletion<any>>, AnimClipConfig>, "computeTween">>, ...effectOptions: unknown[]): EffectFrameGeneratorSet; }>>, AnimClipConfig>, "computeTween">>,
                                ...effectOptions: unknown[],
                            ): EffectFrameGeneratorSet;
                        },
                    >,
                >,
                AnimClipConfig,
            >,
            "computeTween",
        >,
    >
  • keyframe: Keyframe

    A single Keyframe object dictating the beginning state of the transition.

  Returns {
      keyframesGenerator_play: () => {
          composite?: CompositeOperationOrAuto;
          easing?: string;
          offset?: number
          | null;
          [property: string]: string | number | null | undefined;
      }[];
  }

  See

  • Keyframe Formats (way #1)
  • Keyframe Properties

  Example

  const { Transition } = webchalk.createAnimationClipFactories();
  
    // get element from DOM and set its styles (just to give some explicit values to look at)
    const square = document.querySelector('.square') as HTMLElement;
    square.style.opacity = '0.5';
    square.style.backgroundColor = 'black';
    square.style.width = '200px';
  
    // A = element, B = effect name, C = effect options, D = configuration (optional)
    
    //                       A       B        C                                                     D
    const clip1 = Transition(square, '~from', [{opacity: '0', backgroundColor: 'red', width: '0'}], {duration: 2000});
    //                       A       B        C                    D
    const clip2 = Transition(square, '~from', [{width: '5000px'}], {duration: 1000});
  
    (async () => {
      // The square instantly becomes invisible (0 opacity), turns red, and has 0 width. Then over 2 seconds, it
      // transitions back to its state before the transition (0.5 opacity, black background, and 200px width).
      await clip1.play();
  
      // The square instantly becomes 5000px. Then over 1 second, it transitions back to 200px width.
      await clip2.play();
    })();
  Copy

defaultConfig: {}

howOftenBuildGenerators: "on-every-play"

immutableConfig: {}

buildFrameGenerators: function

• buildFrameGenerators(
      this: Readonly<
          Pick<
              TransitionClip<
                  Readonly<
                      StripDuplicateMethodAutocompletion<
                          {
                              defaultConfig?: Partial<(...)> & object;
                              howOftenBuildGenerators?: "on-first-play-only" | "on-every-play";
                              immutableConfig?: Partial<(...)> & object;
                              buildFrameGenerators(
                                  this: Readonly<Pick<AnimClip<(...), (...)>, "computeTween">>,
                                  ...effectOptions: unknown[],
                              ): EffectFrameGeneratorSet;
                          },
                      >,
                  >,
              >,
              "domElem"
              | "getEffectDetails"
              | "getStatus"
              | "getStyles"
              | "getTiming",
          >,
      > & Readonly<
          Pick<
              AnimClip<
                  Readonly<
                      StripDuplicateMethodAutocompletion<
                          {
                              defaultConfig?: Partial<(...)> & object;
                              howOftenBuildGenerators?: "on-first-play-only" | "on-every-play";
                              immutableConfig?: Partial<(...)> & object;
                              buildFrameGenerators(
                                  this: Readonly<Pick<AnimClip<Readonly<StripDuplicateMethodAutocompletion<{ defaultConfig?: (Partial<unknown> & object) | undefined; immutableConfig?: (Partial<unknown> & object) | undefined; howOftenBuildGenerators?: "on-first-play-only" | "on-every-play" | undefined; buildFrameGenerators(this: Readonly<Pick<AnimClip<Readonly<StripDuplicateMethodAutocompletion<any>>, AnimClipConfig>, "computeTween">>, ...effectOptions: unknown[]): EffectFrameGeneratorSet; }>>, AnimClipConfig>, "computeTween">>,
                                  ...effectOptions: unknown[],
                              ): EffectFrameGeneratorSet;
                          },
                      >,
                  >,
                  AnimClipConfig,
              >,
              "computeTween",
          >,
      >,
      keyframe: Keyframe,
  ): { keyframesGenerator_play: () => {}[] }

  Parameters

  • this: Readonly<
        Pick<
            TransitionClip<
                Readonly<
                    StripDuplicateMethodAutocompletion<
                        {
                            defaultConfig?: Partial<(...)> & object;
                            howOftenBuildGenerators?: "on-first-play-only" | "on-every-play";
                            immutableConfig?: Partial<(...)> & object;
                            buildFrameGenerators(
                                this: Readonly<Pick<AnimClip<(...), (...)>, "computeTween">>,
                                ...effectOptions: unknown[],
                            ): EffectFrameGeneratorSet;
                        },
                    >,
                >,
            >,
            "domElem"
            | "getEffectDetails"
            | "getStatus"
            | "getStyles"
            | "getTiming",
        >,
    > & Readonly<
        Pick<
            AnimClip<
                Readonly<
                    StripDuplicateMethodAutocompletion<
                        {
                            defaultConfig?: Partial<(...)> & object;
                            howOftenBuildGenerators?: "on-first-play-only" | "on-every-play";
                            immutableConfig?: Partial<(...)> & object;
                            buildFrameGenerators(
                                this: Readonly<Pick<AnimClip<Readonly<StripDuplicateMethodAutocompletion<{ defaultConfig?: (Partial<unknown> & object) | undefined; immutableConfig?: (Partial<unknown> & object) | undefined; howOftenBuildGenerators?: "on-first-play-only" | "on-every-play" | undefined; buildFrameGenerators(this: Readonly<Pick<AnimClip<Readonly<StripDuplicateMethodAutocompletion<any>>, AnimClipConfig>, "computeTween">>, ...effectOptions: unknown[]): EffectFrameGeneratorSet; }>>, AnimClipConfig>, "computeTween">>,
                                ...effectOptions: unknown[],
                            ): EffectFrameGeneratorSet;
                        },
                    >,
                >,
                AnimClipConfig,
            >,
            "computeTween",
        >,
    >
  • keyframe: Keyframe

    A single Keyframe object dictating the end state of the transition.

  Returns { keyframesGenerator_play: () => {}[] }

  See

  • Keyframe Formats (way #1)
  • Keyframe Properties

  Example

  const { Transition } = webchalk.createAnimationClipFactories();
  
    // get element from DOM and set its styles (just to give some explicit values to look at)
    const square = document.querySelector('.square') as HTMLElement;
    square.style.opacity = '0.5';
    square.style.backgroundColor = 'black';
    square.style.width = '200px';
  
    // A = element, B = effect name, C = effect options, D = configuration (optional)
    
    //                       A       B      C                                                     D
    const clip1 = Transition(square, '~to', [{opacity: '0', backgroundColor: 'red', width: '0'}], {duration: 2000});
    //                       A       B      C                            D
    const clip2 = Transition(square, '~to', [{opacity: '1', width: '5000px'}], {duration: 1000});
    const clip3 = Transition(square, '~to', [{width: '200px'}], {duration: 0.5, removeInlineStylesOnFinish: true});
  
    (async () => {
      // Over 2 seconds, the square transitions to having 0 opacity, a red background color, and 0 width.
      await clip1.play();
  
      // Over 1 second, the square transitions to have 100% opacity and 5000px width.
      await clip2.play();
  
      // Over 0.5 seconds, the square transitions to having 200px.
      // Because of removeInlineStylesOnFinish, the inline styles related to this clip (i.e., just the width) will be
      // removed from the element in the HTML after the clip finishes. This is reasonable here since the very original
      // width of the square is 200px.
      await clip3.play();
    })();
  Copy