Variable libPresetEntrancesConst

Type declaration

• ~appear: {
      defaultConfig: {};
      effectCompositionFrequency: "on-first-play-only";
      immutableConfig: {
          composite: "replace";
          duration: 0;
          easing: "linear";
      };
      composeEffect(): {};
  }

  Element appears instantaneously.

  • defaultConfig: {}

  • effectCompositionFrequency: "on-first-play-only"

  • immutableConfig: {
        composite: "replace";
        duration: 0;
        easing: "linear";
    }

    • Readonlycomposite: "replace"

    • Readonlyduration: 0

    • Readonlyeasing: "linear"

  • composeEffect:function

    • composeEffect(): {}

    • Returns {}

• ~fade-in: {
      defaultConfig: {};
      effectCompositionFrequency: "on-first-play-only";
      immutableConfig: {
          composite: "replace";
      };
      composeEffect(): {
          forwardKeyframesGenerator: (() => ({
              opacity: string;
          } | {
              opacity?: undefined;
          })[]);
      };
  }

  Element fades in, starting from 0 opacity.

  • defaultConfig: {}

  • effectCompositionFrequency: "on-first-play-only"

  • immutableConfig: {
        composite: "replace";
    }

    • Readonlycomposite: "replace"

  • composeEffect:function

    • composeEffect(): {
          forwardKeyframesGenerator: (() => ({
              opacity: string;
          } | {
              opacity?: undefined;
          })[]);
      }

    • Returns {
          forwardKeyframesGenerator: (() => ({
              opacity: string;
          } | {
              opacity?: undefined;
          })[]);
      }

      • ReadonlyforwardKeyframesGenerator: (() => ({
            opacity: string;
        } | {
            opacity?: undefined;
        })[])

        • • (): ({
                opacity: string;
            } | {
                opacity?: undefined;
            })[]

          • Returns ({
                opacity: string;
            } | {
                opacity?: undefined;
            })[]

• ~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: string;
          }[]);
      };
  }

  Element flies in from offscreen from the specified direction.

  • defaultConfig: {
        composite: "accumulate";
    }

    • Readonlycomposite: "accumulate"

  • effectCompositionFrequency: "on-first-play-only"

  • immutableConfig: {}

  • composeEffect:function

    • composeEffect(direction?): {
          forwardKeyframesGenerator: (() => {
              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 {
          forwardKeyframesGenerator: (() => {
              translate: string;
          }[]);
      }

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

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

          • Returns {
                translate: string;
            }[]

• ~pinwheel: {
      defaultConfig: {};
      effectCompositionFrequency: "on-first-play-only";
      immutableConfig: {};
      composeEffect(numSpins?: number, direction?: "clockwise" | "counterclockwise"): {
          forwardKeyframesGenerator: (() => ({
              opacity: number;
              rotate: string;
              scale: number;
          } | {
              opacity?: undefined;
              rotate?: undefined;
              scale?: undefined;
          })[]);
      };
  }

  Element spins and zooms into view while fading in.

  • defaultConfig: {}

  • effectCompositionFrequency: "on-first-play-only"

  • immutableConfig: {}

  • composeEffect:function

    • composeEffect(numSpins?, direction?): {
          forwardKeyframesGenerator: (() => ({
              opacity: number;
              rotate: string;
              scale: number;
          } | {
              opacity?: undefined;
              rotate?: undefined;
              scale?: undefined;
          })[]);
      }

    • Parameters

      • numSpins: number = 2

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

        direction of the rotation

      Returns {
          forwardKeyframesGenerator: (() => ({
              opacity: number;
              rotate: string;
              scale: number;
          } | {
              opacity?: undefined;
              rotate?: undefined;
              scale?: undefined;
          })[]);
      }

      • ReadonlyforwardKeyframesGenerator: (() => ({
            opacity: number;
            rotate: string;
            scale: number;
        } | {
            opacity?: undefined;
            rotate?: undefined;
            scale?: undefined;
        })[])

        • • (): ({
                opacity: number;
                rotate: string;
                scale: number;
            } | {
                opacity?: undefined;
                rotate?: undefined;
                scale?: undefined;
            })[]

          • Returns ({
                opacity: number;
                rotate: string;
                scale: number;
            } | {
                opacity?: undefined;
                rotate?: undefined;
                scale?: undefined;
            })[]

• ~rise-up: {
      defaultConfig: {
          composite: "accumulate";
      };
      effectCompositionFrequency: "on-first-play-only";
      immutableConfig: {};
      composeEffect(): {
          forwardKeyframesGenerator: (() => (
              | {
                  composite: "replace";
                  easing?: undefined;
                  offset?: undefined;
                  opacity: number;
                  translate?: undefined;
              }
              | {
                  composite?: undefined;
                  easing: string;
                  offset: number;
                  opacity?: undefined;
                  translate: string;
              }
              | {
                  composite?: undefined;
                  easing?: undefined;
                  offset: number;
                  opacity?: undefined;
                  translate: string;
              }
              | {
                  composite?: undefined;
                  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"

  • effectCompositionFrequency: "on-first-play-only"

  • immutableConfig: {}

  • composeEffect:function

    • composeEffect(): {
          forwardKeyframesGenerator: (() => (
              | {
                  composite: "replace";
                  easing?: undefined;
                  offset?: undefined;
                  opacity: number;
                  translate?: undefined;
              }
              | {
                  composite?: undefined;
                  easing: string;
                  offset: number;
                  opacity?: undefined;
                  translate: string;
              }
              | {
                  composite?: undefined;
                  easing?: undefined;
                  offset: number;
                  opacity?: undefined;
                  translate: string;
              }
              | {
                  composite?: undefined;
                  easing?: undefined;
                  offset?: undefined;
                  opacity?: undefined;
                  translate: string;
              })[]);
      }

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

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

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

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

• ~slide-in: {
      defaultConfig: {
          duration: 100;
      };
      effectCompositionFrequency: "on-first-play-only";
      immutableConfig: {
          composite: "accumulate";
      };
      composeEffect(direction?:
          | "from-left"
          | "from-top"
          | "from-bottom"
          | "from-right"): {
          forwardKeyframesGenerator: (() => (
              | {
                  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

  • effectCompositionFrequency: "on-first-play-only"

  • immutableConfig: {
        composite: "accumulate";
    }

    • Readonlycomposite: "accumulate"

  • composeEffect:function

    • composeEffect(direction?): {
          forwardKeyframesGenerator: (() => (
              | {
                  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 {
          forwardKeyframesGenerator: (() => (
              | {
                  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;
              })[]);
      }

      • forwardKeyframesGenerator: (() => (
            | {
                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: {};
      effectCompositionFrequency: "on-first-play-only";
      immutableConfig: {
          composite: "replace";
      };
      composeEffect(direction?:
          | "from-left"
          | "from-top"
          | "from-bottom"
          | "from-right"): {
          forwardKeyframesGenerator: (() => Keyframe[]);
      };
  }

  Element is wiped on, starting from the specified direction.

  • defaultConfig: {}

  • effectCompositionFrequency: "on-first-play-only"

  • immutableConfig: {
        composite: "replace";
    }

    • Readonlycomposite: "replace"

  • composeEffect:function

    • composeEffect(direction?): {
          forwardKeyframesGenerator: (() => Keyframe[]);
      }

    • Parameters

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

        direction from which to begin the wipe

      Returns {
          forwardKeyframesGenerator: (() => Keyframe[]);
      }

      • forwardKeyframesGenerator: (() => Keyframe[])

        • • (): Keyframe[]

          • Returns Keyframe[]