Interface LibraryPresetEntranceEffects

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

interface LibraryPresetEntranceEffects {
    ~appear: {
        defaultConfig: {};
        immutableConfig: {
            duration: 0;
        };
        generateKeyframes(): {
            forwardFrames: [];
        };
    };
    ~fade-in: {
        defaultConfig: {};
        immutableConfig: {};
        generateKeyframes(): {
            forwardFrames: [{
                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;
            }[]);
        };
    };
    ~pinwheel: {
        defaultConfig: {};
        immutableConfig: {};
        generateKeyframes(numSpins?: number, direction?: "clockwise" | "counterclockwise"): {
            forwardFrames: [{
                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;
                })[]);
        };
    };
    ~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;
                })[]);
        };
    };
    ~wipe: {
        defaultConfig: {};
        immutableConfig: {};
        generateKeyframes(direction?:
            | "from-left"
            | "from-top"
            | "from-bottom"
            | "from-right"): {
            forwardFrames: {
                clipPath: string;
            }[];
        };
    };
}

Index

Properties

~appear ~fade-in ~fly-in ~pinwheel ~rise-up ~slide-in ~wipe

Properties

~appear

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

Element appears instantaneously.

Type declaration

defaultConfig: {}
immutableConfig: {
duration: 0;
}
- Readonlyduration: 0
generateKeyframes:function
- generateKeyframes(): {
  forwardFrames: [];
  }
- Returns {
  forwardFrames: [];
  }
  - ReadonlyforwardFrames: []
  - Defined in src/2_animationEffects/libraryPresetEffectBanks.ts:44

~fade-in

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

Element fades in, starting from 0 opacity.

Type declaration

defaultConfig: {}
immutableConfig: {}
generateKeyframes:function
- generateKeyframes(): {
      forwardFrames: [{
          opacity: "0";
      }, {}];
  }
- Returns {
      forwardFrames: [{
          opacity: "0";
      }, {}];
  }
  - ReadonlyforwardFrames: [{
    opacity: "0";
    }, {}]
  - Defined in src/2_animationEffects/libraryPresetEffectBanks.ts:61

~fly-in

~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.

Type declaration

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;
        }[]
  - Defined in src/2_animationEffects/libraryPresetEffectBanks.ts:79

~pinwheel

~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.

Type declaration

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;
    }, {}]
  - Defined in src/2_animationEffects/libraryPresetEffectBanks.ts:127

~rise-up

~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.

Type declaration

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;
            })[]
  - Defined in src/2_animationEffects/libraryPresetEffectBanks.ts:152

~slide-in

~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.

Type declaration

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;
            })[]
  - Defined in src/2_animationEffects/libraryPresetEffectBanks.ts:203

~wipe

~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.

Type declaration

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;
    }[]
  - Defined in src/2_animationEffects/libraryPresetEffectBanks.ts:177

Interface LibraryPresetEntranceEffects

Index

Properties

Properties

~appear

Type declaration

defaultConfig: {}

immutableConfig: { duration: 0; }

Readonlyduration: 0

generateKeyframes:function

Returns { forwardFrames: []; }

ReadonlyforwardFrames: []

~fade-in

Type declaration

defaultConfig: {}

immutableConfig: {}

generateKeyframes:function

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

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

~fly-in

Type declaration

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

Readonlycomposite: "accumulate"

ReadonlyrunGeneratorsNow: false

immutableConfig: {}

generateKeyframeGenerators:function

Parameters

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

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

Returns { translate: string; }[]

~pinwheel

Type declaration

defaultConfig: {}

immutableConfig: {}

generateKeyframes:function

Parameters

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

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

~rise-up

Type declaration

defaultConfig: { composite: "accumulate"; }

Readonlycomposite: "accumulate"

immutableConfig: {}

generateKeyframeGenerators:function

~slide-in

Type declaration

defaultConfig: { duration: 100; }

Readonlyduration: 100

generateKeyframeGenerators:function

Parameters

~wipe

Type declaration

defaultConfig: {}

immutableConfig: {}

generateKeyframes:function

Parameters

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

forwardFrames: { clipPath: string; }[]

Settings

On This Page

immutableConfig: {
duration: 0;
}

`Readonly`duration: 0

Returns {
forwardFrames: [];
}

`Readonly`forwardFrames: []

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

`Readonly`forwardFrames: [{
opacity: "0";
}, {}]

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

`Readonly`composite: "accumulate"

`Readonly`runGeneratorsNow: false

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

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

Returns {
translate: string;
}[]

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

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

defaultConfig: {
composite: "accumulate";
}

`Readonly`composite: "accumulate"

defaultConfig: {
duration: 100;
}

`Readonly`duration: 100

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

forwardFrames: {
clipPath: string;
}[]