Interface LibraryPresetExitEffects

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

interface LibraryPresetExitEffects {
    ~disappear: {
        defaultConfig: {};
        effectCompositionFrequency: "on-first-play-only";
        immutableConfig: {
            composite: "replace";
            duration: 0;
            easing: "linear";
        };
        composeEffect(): {};
    };
    ~fade-out: {
        defaultConfig: {};
        effectCompositionFrequency: "on-first-play-only";
        immutableConfig: {
            composite: "replace";
        };
        composeEffect(): {
            forwardKeyframesGenerator: (() => ({
                opacity?: undefined;
            } | {
                opacity: string;
            })[]);
        };
    };
    ~fly-out: {
        defaultConfig: {};
        effectCompositionFrequency: "on-first-play-only";
        immutableConfig: {
            composite: "accumulate";
        };
        composeEffect(direction?:
            | "to-left"
            | "to-top"
            | "to-bottom"
            | "to-right"
            | "to-top-left"
            | "to-top-right"
            | "to-bottom-left"
            | "to-bottom-right"): {
            forwardKeyframesGenerator: (() => {
                translate: string;
            }[]);
        };
    };
    ~pinwheel: {
        defaultConfig: {};
        effectCompositionFrequency: "on-first-play-only";
        immutableConfig: {};
        composeEffect(numSpins?: number, direction?: "clockwise" | "counterclockwise"): {
            forwardKeyframesGenerator: (() => ({
                opacity?: undefined;
                rotate?: undefined;
                scale?: undefined;
            } | {
                opacity: number;
                rotate: string;
                scale: number;
            })[]);
        };
    };
    ~sink-down: {
        defaultConfig: {};
        effectCompositionFrequency: "on-first-play-only";
        immutableConfig: {
            composite: "accumulate";
        };
        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;
                })[]);
            reverseKeyframesEffect: true;
        };
    };
    ~slide-out: {
        defaultConfig: {
            duration: 100;
        };
        effectCompositionFrequency: "on-first-play-only";
        immutableConfig: {
            composite: "accumulate";
        };
        composeEffect(direction?:
            | "to-left"
            | "to-top"
            | "to-bottom"
            | "to-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;
                })[]);
        };
    };
    ~wipe: {
        defaultConfig: {};
        effectCompositionFrequency: "on-first-play-only";
        immutableConfig: {
            composite: "replace";
        };
        composeEffect(direction?:
            | "from-left"
            | "from-top"
            | "from-bottom"
            | "from-right"): {
            forwardKeyframesGenerator: (() => Keyframe[]);
        };
    };
}

Index

Properties

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

Properties

~disappear

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

Element disappears instantaneously.

Type declaration

defaultConfig: {}
effectCompositionFrequency: "on-first-play-only"
immutableConfig: {
    composite: "replace";
    duration: 0;
    easing: "linear";
}
- Readonlycomposite: "replace"
- Readonlyduration: 0
- Readonlyeasing: "linear"
composeEffect:function
- composeEffect(): {}
- Returns {}
  - Defined in src/2_animationEffects/libraryPresetEffectBanks.ts:303

~fade-out

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

Element fades out to 0 opacity.

Type declaration

defaultConfig: {}
effectCompositionFrequency: "on-first-play-only"
immutableConfig: {
composite: "replace";
}
- Readonlycomposite: "replace"
composeEffect:function
- composeEffect(): {
      forwardKeyframesGenerator: (() => ({
          opacity?: undefined;
      } | {
          opacity: string;
      })[]);
  }
- Returns {
      forwardKeyframesGenerator: (() => ({
          opacity?: undefined;
      } | {
          opacity: string;
      })[]);
  }
  - ReadonlyforwardKeyframesGenerator: (() => ({
    opacity?: undefined;
    } | {
    opacity: string;
    })[])
    - - (): ({
        opacity?: undefined;
        } | {
        opacity: string;
        })[]
      - Returns ({
        opacity?: undefined;
        } | {
        opacity: string;
        })[]
  - Defined in src/2_animationEffects/libraryPresetEffectBanks.ts:321

~fly-out

~fly-out: {
    defaultConfig: {};
    effectCompositionFrequency: "on-first-play-only";
    immutableConfig: {
        composite: "accumulate";
    };
    composeEffect(direction?:
        | "to-left"
        | "to-top"
        | "to-bottom"
        | "to-right"
        | "to-top-left"
        | "to-top-right"
        | "to-bottom-left"
        | "to-bottom-right"): {
        forwardKeyframesGenerator: (() => {
            translate: string;
        }[]);
    };
} = ...

Element flies offscreen towards the specified direction

Type declaration

defaultConfig: {}
effectCompositionFrequency: "on-first-play-only"
immutableConfig: {
composite: "accumulate";
}
- Readonlycomposite: "accumulate"
composeEffect:function
- composeEffect(direction?): {
      forwardKeyframesGenerator: (() => {
          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 {
      forwardKeyframesGenerator: (() => {
          translate: string;
      }[]);
  }
  - forwardKeyframesGenerator: (() => {
    translate: string;
    }[])
    - - (): {
        translate: string;
        }[]
      - Returns {
        translate: string;
        }[]
  - Defined in src/2_animationEffects/libraryPresetEffectBanks.ts:340

~pinwheel

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

Element spins and shrinks while fading out.

Type declaration

defaultConfig: {}
effectCompositionFrequency: "on-first-play-only"
immutableConfig: {}
composeEffect:function
- composeEffect(numSpins?, direction?): {
      forwardKeyframesGenerator: (() => ({
          opacity?: undefined;
          rotate?: undefined;
          scale?: undefined;
      } | {
          opacity: number;
          rotate: string;
          scale: number;
      })[]);
  }
- Parameters
  - numSpins: number = 2
    number of times the element will spin
  - direction: "clockwise" | "counterclockwise" = 'clockwise'
    direction of the spin
  Returns {
      forwardKeyframesGenerator: (() => ({
          opacity?: undefined;
          rotate?: undefined;
          scale?: undefined;
      } | {
          opacity: number;
          rotate: string;
          scale: number;
      })[]);
  }
  - ReadonlyforwardKeyframesGenerator: (() => ({
        opacity?: undefined;
        rotate?: undefined;
        scale?: undefined;
    } | {
        opacity: number;
        rotate: string;
        scale: number;
    })[])
    - - (): ({
            opacity?: undefined;
            rotate?: undefined;
            scale?: undefined;
        } | {
            opacity: number;
            rotate: string;
            scale: number;
        })[]
      - Returns ({
            opacity?: undefined;
            rotate?: undefined;
            scale?: undefined;
        } | {
            opacity: number;
            rotate: string;
            scale: number;
        })[]
  - Defined in src/2_animationEffects/libraryPresetEffectBanks.ts:385

~sink-down

~sink-down: {
    defaultConfig: {};
    effectCompositionFrequency: "on-first-play-only";
    immutableConfig: {
        composite: "accumulate";
    };
    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;
            })[]);
        reverseKeyframesEffect: true;
    };
} = ...

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

Type declaration

defaultConfig: {}
effectCompositionFrequency: "on-first-play-only"
immutableConfig: {
composite: "accumulate";
}
- Readonlycomposite: "accumulate"
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;
          })[]);
      reverseKeyframesEffect: true;
  }
- 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;
          })[]);
      reverseKeyframesEffect: true;
  }
  - 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;
            })[]
  - reverseKeyframesEffect: true
  - Defined in src/2_animationEffects/libraryPresetEffectBanks.ts:410

~slide-out

~slide-out: {
    defaultConfig: {
        duration: 100;
    };
    effectCompositionFrequency: "on-first-play-only";
    immutableConfig: {
        composite: "accumulate";
    };
    composeEffect(direction?:
        | "to-left"
        | "to-top"
        | "to-bottom"
        | "to-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 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
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:
        | "to-left"
        | "to-top"
        | "to-bottom"
        | "to-right" = 'to-top'
    direction to 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;
            })[]
  - Defined in src/2_animationEffects/libraryPresetEffectBanks.ts:487

~wipe

~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 off, starting from the specified direction.

Type declaration

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'
  Returns {
  forwardKeyframesGenerator: (() => Keyframe[]);
  }
  - forwardKeyframesGenerator: (() => Keyframe[])
    - - (): Keyframe[]
      - Returns Keyframe[]
  - Defined in src/2_animationEffects/libraryPresetEffectBanks.ts:445

Interface LibraryPresetExitEffects

Index

Properties

Properties

~disappear

Type declaration

defaultConfig: {}

effectCompositionFrequency: "on-first-play-only"

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

Readonlycomposite: "replace"

Readonlyduration: 0

Readonlyeasing: "linear"

composeEffect:function

Returns {}

~fade-out

Type declaration

defaultConfig: {}

effectCompositionFrequency: "on-first-play-only"

immutableConfig: { composite: "replace"; }

Readonlycomposite: "replace"

composeEffect:function

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

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

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

~fly-out

Type declaration

defaultConfig: {}

effectCompositionFrequency: "on-first-play-only"

immutableConfig: { composite: "accumulate"; }

Readonlycomposite: "accumulate"

composeEffect:function

Parameters

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

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

Returns { translate: string; }[]

~pinwheel

Type declaration

defaultConfig: {}

effectCompositionFrequency: "on-first-play-only"

immutableConfig: {}

composeEffect:function

Parameters

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

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

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

~sink-down

Type declaration

defaultConfig: {}

effectCompositionFrequency: "on-first-play-only"

immutableConfig: { composite: "accumulate"; }

Readonlycomposite: "accumulate"

composeEffect:function

reverseKeyframesEffect: true

~slide-out

Type declaration

defaultConfig: { duration: 100; }

Readonlyduration: 100

effectCompositionFrequency: "on-first-play-only"

immutableConfig: { composite: "accumulate"; }

Readonlycomposite: "accumulate"

composeEffect:function

Parameters

~wipe

Type declaration

defaultConfig: {}

effectCompositionFrequency: "on-first-play-only"

immutableConfig: { composite: "replace"; }

Readonlycomposite: "replace"

composeEffect:function

Parameters

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

forwardKeyframesGenerator: (() => Keyframe[])

Returns Keyframe[]

Settings

On This Page

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

`Readonly`composite: "replace"

`Readonly`duration: 0

`Readonly`easing: "linear"

immutableConfig: {
composite: "replace";
}

`Readonly`composite: "replace"

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

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

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

immutableConfig: {
composite: "accumulate";
}

`Readonly`composite: "accumulate"

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

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

Returns {
translate: string;
}[]

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

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

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

immutableConfig: {
composite: "accumulate";
}

`Readonly`composite: "accumulate"

defaultConfig: {
duration: 100;
}

`Readonly`duration: 100

immutableConfig: {
composite: "accumulate";
}

`Readonly`composite: "accumulate"

immutableConfig: {
composite: "replace";
}

`Readonly`composite: "replace"

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