Skip to main content

Define a custom enter and exit animation

When it comes to animation the possibility are endless and it doesn't need to be complicated! Starting v7, css animations just works out of the box! You can write your own using the power of css or use any css animation library like animate.css or even copy paste from animista.

All you need to do is to import the cssTransition and define your enter and exit classes.

const bounce = cssTransition({
  enter: "animate__animated animate__bounceIn",
  exit: "animate__animated animate__bounceOut"
});

const swirl = cssTransition({
  enter: "swirl-in-fwd",
  exit: "swirl-out-bck"
});

The codesanbox below demonstrate how easy it is.

Handle transition based on the toast position​

Some transitions are based on the toast position. This is the case for the default one. If you set appendPosition to true, the current position will be appended to the enter and exit class name:

const Zoom = cssTransition({
  // zoomIn will become zoomIn--top-right or zoomIn--top-left and so on
  enter: 'zoomIn',
  // zoomIn will become zoomOut--top-right or zoomOut--top-left and so on
  exit: 'zoomOut',
  // default to false
  appendPosition: true
});
Important

Don't forget to add the position as well when you write your css animations. If you pass multiple classes, the position will be appended only to the last one.

Prevent the toast from collapsing after the exit animation​

By default, the remaining toast will collapse smoothly

This can be disabled as well:

const Zoom = cssTransition({
  collapse: false,
  enter: 'zoomIn', 
  exit: 'zoomOut', 
});

Tweak collapse duration​

The default duration is 300ms. This is also easy to change 💪

const Zoom = cssTransition({
  collapseDuration: 500,
  enter: 'zoomIn', 
  exit: 'zoomOut', 
});