79714633

Date: 2025-07-25 11:17:15
Score: 1.5
Natty:
Report link

Although Matt's answer works and might be useful in some cases (needed adaptation in my case, see the end of this answer)*, there is other ways to achieve this that I find simpler and more flexible, provided by the library itself.

Since v11.10.0 (Nov 14, 2023) SweetAlert2 allows to specify an animation param, that will remove all animations when set to false: animation:false.

I know this param wasn't available when the question was made, and even if it was, this solution, and Matt's one too, have a drawback: we will disable not only the show animations, but every animation, including some animations for hiding or so that we would like to preserve.

A less direct and more customizable way is present in the library since v9.0.0 (Nov 4, 2019). We are allowed to use showClass and hideClass params.

For your case, we could use:

Swal.fire({
  icon: 'error',
  title: 'Oops...',
  text: 'Something went wrong!',
  showClass: {
      popup: ``,
  },
})

This way you wouldn`t disable other animations than the show ones.

You wanted to use it for the icon, but you could customize ohter elements (e.g., container, popup, title...). References for customizable elements can be found in this configuration params example.

.no-animate {
  animation: none !important;
}

Swal.fire({
  icon: 'error',
  text: 'Something went wrong!',
  customClass: {
    popup: 'no-animate'
  }
})
Reasons:
  • Blacklisted phrase (1): not allowed to comment
  • Blacklisted phrase (1): to comment
  • Long answer (-1):
  • Has code block (-0.5):
  • Low reputation (1):
Posted by: porcallán