Interface LibraryPresetEntranceEffects

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

interface LibraryPresetEntranceEffects {
    ~appear: {
        defaultConfig: {};
        effectCompositionFrequency: "on-first-play-only";
        immutableConfig: {
            composite: "replace";
            duration: 0;
            easing: "linear";
        };
        composeEffect(): {};
    };
    ~fade-in: {
        defaultConfig: {};
        effectCompositionFrequency: "on-first-play-only";
        immutableConfig: {
            composite: "replace";
        };
        composeEffect(): {
            forwardKeyframesGenerator: (() => ({
                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;
            }[]);
        };
    };
    ~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;
            })[]);
        };
    };
    ~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;
                })[]);
        };
    };
    ~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;
                })[]);
        };
    };
    ~wipe: {
        defaultConfig: {};
        effectCompositionFrequency: "on-first-play-only";
        immutableConfig: {
            composite: "replace";
        };
        composeEffect(direction?:
            | "from-left"
            | "from-top"
            | "from-bottom"
            | "from-right"): {
            forwardKeyframesGenerator: (() => Keyframe[]);
        };
    };
}

Index

Properties

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

Properties

~appear

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

Element appears 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:53

~fade-in

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

Element fades in, starting from 0 opacity.

Type declaration

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

~fly-in

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

Type declaration

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

~pinwheel

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

Type declaration

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

~rise-up

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

Type declaration

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

~slide-in

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

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

~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 on, 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'
    direction from which to begin the wipe
  Returns {
  forwardKeyframesGenerator: (() => Keyframe[]);
  }
  - forwardKeyframesGenerator: (() => Keyframe[])
    - - (): Keyframe[]
      - Returns Keyframe[]
  - Defined in src/2_animationEffects/libraryPresetEffectBanks.ts:195

Interface LibraryPresetEntranceEffects

Index

Properties

Properties

~appear

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-in

Type declaration

defaultConfig: {}

effectCompositionFrequency: "on-first-play-only"

immutableConfig: { composite: "replace"; }

Readonlycomposite: "replace"

composeEffect:function

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

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

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

~fly-in

Type declaration

defaultConfig: { composite: "accumulate"; }

Readonlycomposite: "accumulate"

effectCompositionFrequency: "on-first-play-only"

immutableConfig: {}

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: number; rotate: string; scale: number; } | { opacity?: undefined; rotate?: undefined; scale?: undefined; })[]); }

ReadonlyforwardKeyframesGenerator: (() => ({ 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

Type declaration

defaultConfig: { composite: "accumulate"; }

Readonlycomposite: "accumulate"

effectCompositionFrequency: "on-first-play-only"

immutableConfig: {}

composeEffect:function

~slide-in

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: string;
} | {
opacity?: undefined;
})[]);
}

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

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

defaultConfig: {
composite: "accumulate";
}

`Readonly`composite: "accumulate"

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

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

Returns {
translate: string;
}[]

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

`Readonly`forwardKeyframesGenerator: (() => ({
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;
})[]

defaultConfig: {
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[]);
}