Interface LibraryPresetExitEffects

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

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

Index

Properties

~disappear ~fade-out ~fly-out ~pinwheel ~sink-down ~slide-out ~wipe

Properties

~disappear

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

Element disappears instantaneously.

Type declaration

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

~fade-out

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

Element fades out to 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:277

~fly-out

~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

Type declaration

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

~pinwheel

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

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" = 'clockwise'
    direction of the spin
  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:338

~sink-down

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

Type declaration

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

~slide-out

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

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

~wipe

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

Type declaration

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

Interface LibraryPresetExitEffects

Index

Properties

Properties

~disappear

Type declaration

defaultConfig: {}

immutableConfig: { duration: 0; }

Readonlyduration: 0

generateKeyframes:function

Returns { forwardFrames: []; }

ReadonlyforwardFrames: []

~fade-out

Type declaration

defaultConfig: {}

immutableConfig: {}

generateKeyframes:function

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

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

~fly-out

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; }]

~sink-down

Type declaration

defaultConfig: { composite: "accumulate"; }

Readonlycomposite: "accumulate"

immutableConfig: {}

generateKeyframeGenerators:function

~slide-out

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;
}[]