Before version 9.0.0 i used this code to completely disable animation on a toast alert.

Swal.fire({
    animation : false,
    toast: true,
    ....
});

Now with version 9.* i tried with this code, and the result it looks the same

Swal.fire({
    showClass : { popup : "swal2-noanimation", backdrop : "swal2-noanimation", icon : "swal2-noanimation"},
    //hideClass : { popup : "swal2-noanimation", backdrop : "swal2-noanimation", icon : "swal2-noanimation"},
    toast: true,
    ....
});

If i enable also the property hideClass i can't hide the alert with the method Swal.close().

So what is the correct solution to get the same effect as before?

Before version 9.0.0 i used this code to completely disable animation on a toast alert.

Swal.fire({
    animation : false,
    toast: true,
    ....
});

Now with version 9.* i tried with this code, and the result it looks the same

Swal.fire({
    showClass : { popup : "swal2-noanimation", backdrop : "swal2-noanimation", icon : "swal2-noanimation"},
    //hideClass : { popup : "swal2-noanimation", backdrop : "swal2-noanimation", icon : "swal2-noanimation"},
    toast: true,
    ....
});

If i enable also the property hideClass i can't hide the alert with the method Swal.close().

So what is the correct solution to get the same effect as before?

• javascript
• sweetalert2

1 Answer 1

Starting from v11.10.0 the animation parameter was re-introduced:

Swal.fire({
  ...
  animation: false
})

⚠ OUTDATED ANSWER BELOW: ⚠

As per deprection message:

SweetAlert2: "animation" is deprecated and will be removed in the next major release. Please use "showClass" and "hideClass" instead.

Swal.fire({
  icon: 'success',
  title: 'I am not animated',
  showClass: {
    backdrop: 'swal2-noanimation', // disable backdrop animation
    popup: '',                     // disable popup animation
    icon: ''                       // disable icon animation
  },
  hideClass: {
    popup: '',                     // disable popup fade-out animation
  },
})

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

Read the release notes to see all breaking changes: https://github.com/sweetalert2/sweetalert2/releases/tag/v9.0.0