Variable libPresetExitsConst

Type declaration

• ~disappear: {
      defaultConfig: {};
      immutableConfig: {
          duration: 0;
      };
      generateKeyframes(): {
          forwardFrames: [];
      };
  }

  Element disappears instantaneously.

  • defaultConfig: {}

  • immutableConfig: {
        duration: 0;
    }

    • Readonlyduration: 0

  • generateKeyframes:function

    • generateKeyframes(): {
          forwardFrames: [];
      }

    • Returns {
          forwardFrames: [];
      }

      • ReadonlyforwardFrames: []

• ~fade-out: {
      defaultConfig: {};
      immutableConfig: {};
      generateKeyframes(): {
          forwardFrames: [{}, {
              opacity: "0";
          }];
      };
  }

  Element fades out to 0 opacity.

  • defaultConfig: {}

  • immutableConfig: {}

  • generateKeyframes:function

    • generateKeyframes(): {
          forwardFrames: [{}, {
              opacity: "0";
          }];
      }

    • Returns {
          forwardFrames: [{}, {
              opacity: "0";
          }];
      }

      • ReadonlyforwardFrames: [{}, {
            opacity: "0";
        }]

• ~fly-out: {
      defaultConfig: {
          composite: "accumulate";
          runGeneratorsNow: false;
      };
      immutableConfig: {};
      generateKeyframeGenerators(direction?:
          | "to-left"
          | "to-top"
          | "to-bottom"
          | "to-right"
          | "to-top-left"
          | "to-top-right"
          | "to-bottom-left"
          | "to-bottom-right"): {
          forwardGenerator: (() => {
              translate: string;
          }[]);
      };
  }

  Element flies offscreen towards the specified direction

  • defaultConfig: {
        composite: "accumulate";
        runGeneratorsNow: false;
    }

    • Readonlycomposite: "accumulate"

    • ReadonlyrunGeneratorsNow: false

  • immutableConfig: {}

  • generateKeyframeGenerators:function

    • generateKeyframeGenerators(direction?): {
          forwardGenerator: (() => {
              translate: string;
          }[]);
      }

    • Parameters

      • direction:
            | "to-left"
            | "to-top"
            | "to-bottom"
            | "to-right"
            | "to-top-left"
            | "to-top-right"
            | "to-bottom-left"
            | "to-bottom-right" = 'to-bottom'

        direction to which the element should exit

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

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

        • • (): {
                translate: string;
            }[]

          • Returns {
                translate: string;
            }[]

• ~pinwheel: {
      defaultConfig: {};
      immutableConfig: {};
      generateKeyframes(numSpins?: number, direction?: "clockwise" | "counterclockwise"): {
          forwardFrames: [{}, {
              opacity: 0;
              rotate: `z ${number}deg`;
              scale: 0;
          }];
      };
  }

  Element spins and shrinks while fading out.

  • defaultConfig: {}

  • immutableConfig: {}

  • generateKeyframes:function

    • generateKeyframes(numSpins?, direction?): {
          forwardFrames: [{}, {
              opacity: 0;
              rotate: `z ${number}deg`;
              scale: 0;
          }];
      }

    • Parameters

      • numSpins: number = 2

        number of times the element will spin
      • direction: "clockwise" | "counterclockwise" = 'clockwise'

        direction of the spin

      Returns {
          forwardFrames: [{}, {
              opacity: 0;
              rotate: `z ${number}deg`;
              scale: 0;
          }];
      }

      • ReadonlyforwardFrames: [{}, {
            opacity: 0;
            rotate: `z ${number}deg`;
            scale: 0;
        }]

• ~sink-down: {
      defaultConfig: {
          composite: "accumulate";
      };
      immutableConfig: {};
      generateKeyframeGenerators(): {
          forwardGenerator: (() => (
              | {
                  easing: string;
                  offset?: undefined;
                  opacity?: undefined;
                  translate: string;
              }
              | {
                  easing?: undefined;
                  offset: number;
                  opacity?: undefined;
                  translate: string;
              }
              | {
                  easing: string;
                  offset: number;
                  opacity?: undefined;
                  translate: string;
              }
              | {
                  easing?: undefined;
                  offset?: undefined;
                  opacity: number;
                  translate: string;
              })[]);
      };
  }

  Element floats up slightly and then accelerates to the bottom of the screen.

  • defaultConfig: {
        composite: "accumulate";
    }

    • Readonlycomposite: "accumulate"

  • immutableConfig: {}

  • generateKeyframeGenerators:function

    • generateKeyframeGenerators(): {
          forwardGenerator: (() => (
              | {
                  easing: string;
                  offset?: undefined;
                  opacity?: undefined;
                  translate: string;
              }
              | {
                  easing?: undefined;
                  offset: number;
                  opacity?: undefined;
                  translate: string;
              }
              | {
                  easing: string;
                  offset: number;
                  opacity?: undefined;
                  translate: string;
              }
              | {
                  easing?: undefined;
                  offset?: undefined;
                  opacity: number;
                  translate: string;
              })[]);
      }

    • Returns {
          forwardGenerator: (() => (
              | {
                  easing: string;
                  offset?: undefined;
                  opacity?: undefined;
                  translate: string;
              }
              | {
                  easing?: undefined;
                  offset: number;
                  opacity?: undefined;
                  translate: string;
              }
              | {
                  easing: string;
                  offset: number;
                  opacity?: undefined;
                  translate: string;
              }
              | {
                  easing?: undefined;
                  offset?: undefined;
                  opacity: number;
                  translate: string;
              })[]);
      }

      • forwardGenerator: (() => (
            | {
                easing: string;
                offset?: undefined;
                opacity?: undefined;
                translate: string;
            }
            | {
                easing?: undefined;
                offset: number;
                opacity?: undefined;
                translate: string;
            }
            | {
                easing: string;
                offset: number;
                opacity?: undefined;
                translate: string;
            }
            | {
                easing?: undefined;
                offset?: undefined;
                opacity: number;
                translate: string;
            })[])

        • • (): (
                | {
                    easing: string;
                    offset?: undefined;
                    opacity?: undefined;
                    translate: string;
                }
                | {
                    easing?: undefined;
                    offset: number;
                    opacity?: undefined;
                    translate: string;
                }
                | {
                    easing: string;
                    offset: number;
                    opacity?: undefined;
                    translate: string;
                }
                | {
                    easing?: undefined;
                    offset?: undefined;
                    opacity: number;
                    translate: string;
                })[]

          • Returns (
                | {
                    easing: string;
                    offset?: undefined;
                    opacity?: undefined;
                    translate: string;
                }
                | {
                    easing?: undefined;
                    offset: number;
                    opacity?: undefined;
                    translate: string;
                }
                | {
                    easing: string;
                    offset: number;
                    opacity?: undefined;
                    translate: string;
                }
                | {
                    easing?: undefined;
                    offset?: undefined;
                    opacity: number;
                    translate: string;
                })[]

• ~slide-out: {
      defaultConfig: {
          duration: 100;
      };
      generateKeyframeGenerators(direction?:
          | "to-left"
          | "to-top"
          | "to-bottom"
          | "to-right"): {
          forwardGenerator: (() => (
              | {
                  clipPath: string;
                  marginBottom?: undefined;
                  marginRight?: undefined;
                  translate: string;
              }
              | {
                  clipPath: string;
                  marginBottom: string;
                  marginRight?: undefined;
                  translate: string;
              }
              | {
                  clipPath: string;
                  marginBottom?: undefined;
                  marginRight: string;
                  translate: string;
              }
              | {
                  clipPath: string;
              })[]);
      };
  }

  Element slides out to the specified direction while also wiping. Particularly effective if the element is adjacent to a different element, making it look as if it is sliding into that element like a dropdown collapsing.

  • defaultConfig: {
        duration: 100;
    }

    • Readonlyduration: 100

  • generateKeyframeGenerators:function

    • generateKeyframeGenerators(direction?): {
          forwardGenerator: (() => (
              | {
                  clipPath: string;
                  marginBottom?: undefined;
                  marginRight?: undefined;
                  translate: string;
              }
              | {
                  clipPath: string;
                  marginBottom: string;
                  marginRight?: undefined;
                  translate: string;
              }
              | {
                  clipPath: string;
                  marginBottom?: undefined;
                  marginRight: string;
                  translate: string;
              }
              | {
                  clipPath: string;
              })[]);
      }

    • Parameters

      • direction:
            | "to-left"
            | "to-top"
            | "to-bottom"
            | "to-right" = 'to-top'

        direction to which to slide

      Returns {
          forwardGenerator: (() => (
              | {
                  clipPath: string;
                  marginBottom?: undefined;
                  marginRight?: undefined;
                  translate: string;
              }
              | {
                  clipPath: string;
                  marginBottom: string;
                  marginRight?: undefined;
                  translate: string;
              }
              | {
                  clipPath: string;
                  marginBottom?: undefined;
                  marginRight: string;
                  translate: string;
              }
              | {
                  clipPath: string;
              })[]);
      }

      • forwardGenerator: (() => (
            | {
                clipPath: string;
                marginBottom?: undefined;
                marginRight?: undefined;
                translate: string;
            }
            | {
                clipPath: string;
                marginBottom: string;
                marginRight?: undefined;
                translate: string;
            }
            | {
                clipPath: string;
                marginBottom?: undefined;
                marginRight: string;
                translate: string;
            }
            | {
                clipPath: string;
            })[])

        • • (): (
                | {
                    clipPath: string;
                    marginBottom?: undefined;
                    marginRight?: undefined;
                    translate: string;
                }
                | {
                    clipPath: string;
                    marginBottom: string;
                    marginRight?: undefined;
                    translate: string;
                }
                | {
                    clipPath: string;
                    marginBottom?: undefined;
                    marginRight: string;
                    translate: string;
                }
                | {
                    clipPath: string;
                })[]

          • Returns (
                | {
                    clipPath: string;
                    marginBottom?: undefined;
                    marginRight?: undefined;
                    translate: string;
                }
                | {
                    clipPath: string;
                    marginBottom: string;
                    marginRight?: undefined;
                    translate: string;
                }
                | {
                    clipPath: string;
                    marginBottom?: undefined;
                    marginRight: string;
                    translate: string;
                }
                | {
                    clipPath: string;
                })[]

• ~wipe: {
      defaultConfig: {};
      immutableConfig: {};
      generateKeyframes(direction?:
          | "from-left"
          | "from-top"
          | "from-bottom"
          | "from-right"): {
          forwardFrames: {
              clipPath: string;
          }[];
      };
  }

  Element is wiped off, starting from the specified direction.

  • defaultConfig: {}

  • immutableConfig: {}

  • generateKeyframes:function

    • generateKeyframes(direction?): {
          forwardFrames: {
              clipPath: string;
          }[];
      }

    • Parameters

      • direction:
            | "from-left"
            | "from-top"
            | "from-bottom"
            | "from-right" = 'from-bottom'

      Returns {
          forwardFrames: {
              clipPath: string;
          }[];
      }

      • forwardFrames: {
            clipPath: string;
        }[]