Interface LibraryPresetMotionEffects

Typings for the preset motion animation effects that come with the library's motion effect bank.

interface LibraryPresetMotionEffects {
    ~move-to: {
        defaultConfig: {};
        effectCompositionFrequency: "on-every-play";
        immutableConfig: {
            composite: "accumulate";
        };
        composeEffect(targetElem: undefined | null | Element, translationOptions?: Partial<MoveToOptions>): {
            backwardKeyframesGenerator: (() => {
                translate: string;
            }[]);
            forwardKeyframesGenerator: (() => {
                translate: string;
            }[]);
        };
    };
    ~translate: {
        defaultConfig: {
            composite: "accumulate";
        };
        effectCompositionFrequency: "on-first-play-only";
        immutableConfig: {};
        composeEffect(translationOptions?: Partial<TranslateOptions>): {
            backwardKeyframesGenerator: (() => {
                translate: string;
            }[]);
            forwardKeyframesGenerator: (() => {
                translate: string;
            }[]);
        };
    };
}

Properties

~move-to ~translate

Properties

~move-to

~move-to: {
    defaultConfig: {};
    effectCompositionFrequency: "on-every-play";
    immutableConfig: {
        composite: "accumulate";
    };
    composeEffect(targetElem: undefined | null | Element, translationOptions?: Partial<MoveToOptions>): {
        backwardKeyframesGenerator: (() => {
            translate: string;
        }[]);
        forwardKeyframesGenerator: (() => {
            translate: string;
        }[]);
    };
} = ...

Element is moved with respect to another element.

Type declaration

  • defaultConfig: {}
    • effectCompositionFrequency: "on-every-play"
    • immutableConfig: {
          composite: "accumulate";
      }
      • Readonlycomposite: "accumulate"
    • composeEffect:function
      • composeEffect(targetElem, translationOptions?): {
            backwardKeyframesGenerator: (() => {
                translate: string;
            }[]);
            forwardKeyframesGenerator: (() => {
                translate: string;
            }[]);
        }

      • Parameters

        • targetElem: undefined | null | Element

          element to which our element should move

        • translationOptions: Partial<MoveToOptions> = {}

          options defining the behavior of the motion

        Returns {
            backwardKeyframesGenerator: (() => {
                translate: string;
            }[]);
            forwardKeyframesGenerator: (() => {
                translate: string;
            }[]);
        }

        • backwardKeyframesGenerator: (() => {
              translate: string;
          }[])
            • (): {
                  translate: string;
              }[]

            • Returns {
                  translate: string;
              }[]

        • forwardKeyframesGenerator: (() => {
              translate: string;
          }[])
            • (): {
                  translate: string;
              }[]

            • Returns {
                  translate: string;
              }[]

    ~translate

    ~translate: {
        defaultConfig: {
            composite: "accumulate";
        };
        effectCompositionFrequency: "on-first-play-only";
        immutableConfig: {};
        composeEffect(translationOptions?: Partial<TranslateOptions>): {
            backwardKeyframesGenerator: (() => {
                translate: string;
            }[]);
            forwardKeyframesGenerator: (() => {
                translate: string;
            }[]);
        };
    } = ...

    Element moves based on the specified translation options.

    Type declaration

    • defaultConfig: {
          composite: "accumulate";
      }
      • Readonlycomposite: "accumulate"
    • effectCompositionFrequency: "on-first-play-only"
    • immutableConfig: {}
      • composeEffect:function
        • composeEffect(translationOptions?): {
              backwardKeyframesGenerator: (() => {
                  translate: string;
              }[]);
              forwardKeyframesGenerator: (() => {
                  translate: string;
              }[]);
          }

        • Parameters

          Returns {
              backwardKeyframesGenerator: (() => {
                  translate: string;
              }[]);
              forwardKeyframesGenerator: (() => {
                  translate: string;
              }[]);
          }

          • backwardKeyframesGenerator: (() => {
                translate: string;
            }[])
              • (): {
                    translate: string;
                }[]

              • Returns {
                    translate: string;
                }[]

          • forwardKeyframesGenerator: (() => {
                translate: string;
            }[])
              • (): {
                    translate: string;
                }[]

              • Returns {
                    translate: string;
                }[]

      Settings

      Member Visibility

      On This Page

      Properties