Skip to content

Toast notification animation settings

Toast notification animation settings control the visual behavior and easing functions of toast alerts during their entrance and exit transitions. These settings determine how a notification appears on the screen (show animation) and how it vanishes (hide animation).^[600-developer__frontend__js-plugin__js-plugin.md]

Configuration Options

Animation behavior is typically configured within a global options object.^[600-developer__frontend__js-plugin__js-plugin.md] The following specific properties are used to define the animation style:

  • showEasing: Defines the timing function or easing curve for the show animation (e.g., "swing").^[600-developer__frontend__js-plugin__js-plugin.md]
  • hideEasing: Defines the timing function or easing curve for the hide animation (e.g., "linear").^[600-developer__frontend__js-plugin__js-plugin.md]
  • showMethod: Specifies the specific animation method or effect to use when the toast appears (e.g., "fadeIn").^[600-developer__frontend__js-plugin__js-plugin.md]
  • hideMethod: Specifies the specific animation method or effect to use when the toast disappears (e.g., "fadeOut").^[600-developer__frontend__js-plugin__js-plugin.md]

Animation settings work in conjunction with duration controls to complete the transition effect.^[600-developer__frontend__js-plugin__js-plugin.md]

  • [[Toast notification duration settings]]: Control the length of the transition (e.g., showDuration, hideDuration).

Sources

^[600-developer__frontend__js-plugin__js-plugin.md]