Enter and exit animations

There are eight built-in enter and exit animations: fade, zoom, zoom with bounce, slide vertically, slide horizontally, bounce horizontally, single bounce horizontally, single bounce vertically.

Example

You can change the default by setting inAnimation and outAnimation properties. inAnimation can be different from outAnimation.

import { animation, toast, Toaster } from "@toastup/react";
import "@toastup/react/style";

export function EnterExitAnimationExample() {
  const handleClick = () =>
    toast.add({
      inAnimation: animation.in.bounceHorizontallyIn,
      outAnimation: animation.out.singleBounceVerticallyOut,
    });
  return (
    <div>
      <button onClick={handleClick}>Add toast</button>
      <Toaster />
    </div>
  );
}