Variable libPresetEntrancesConst

Type declaration

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

  Element appears instantaneously.

  • defaultConfig: {}

  • immutableConfig: {
        duration: 0;
    }

    • Readonlyduration: 0

  • generateKeyframes:function

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

    • Returns {
          forwardFrames: [];
      }

      • ReadonlyforwardFrames: []

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

  Element fades in, starting from 0 opacity.

  • defaultConfig: {}

  • immutableConfig: {}

  • generateKeyframes:function

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

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

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

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

  Element flies in from offscreen from the specified direction.

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

    • Readonlycomposite: "accumulate"

    • ReadonlyrunGeneratorsNow: false

  • immutableConfig: {}

  • generateKeyframeGenerators:function

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

    • Parameters

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

        direction from which the element should enter

      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 zooms into view while fading in.

  • 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" = 'counterclockwise'

        direction of the rotation

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

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

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

  Element flies in from the bottom of the screen and ends up slightly too high, then settles down to its final position.

  • defaultConfig: {
        composite: "accumulate";
    }

    • Readonlycomposite: "accumulate"

  • immutableConfig: {}

  • generateKeyframeGenerators:function

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

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

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

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

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

• ~slide-in: {
      defaultConfig: {
          duration: 100;
      };
      generateKeyframeGenerators(direction?:
          | "from-left"
          | "from-top"
          | "from-bottom"
          | "from-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 in from 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 out of that element like a dropdown expanding.

  • 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:
            | "from-left"
            | "from-top"
            | "from-bottom"
            | "from-right" = 'from-top'

        direction from 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 on, 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'

        direction from which to begin the wipe

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

      • forwardFrames: {
            clipPath: string;
        }[]