What is the best way to adjust the animation settings for SweetAlert2's Toast feature?

I recently integrated SweetAlert2's toast notifications into my web application and customized the animation using the customClass parameter to have the notification slide in from the right side. However, there are a couple of things I'm struggling to figure out:

  1. How can I speed up the notification animation? Currently, it takes around 2 seconds for the notification to slide in, but I want it to be faster, almost instant. I am only familiar with the timer property that controls how long the notification is visible.

  2. Is there a way to make the toast notification slide in beneath my top navigation bar? Can I adjust the top offset or margin to specify where the notification should start from? For example, setting the top of the notification to a specific value like 100px from the top of the screen.

Here is a snippet of my current code:

const toast = swal.mixin({
    toast: true,
    position: 'top-end',
    showConfirmButton: false,
    timer: 10000,
    animation: false,
    customClass: 'animated slideInRight'
});

Answer №1

When specifying the css, it may require some adjustments based on your specific project needs.

If you want to speed up the animation for your first question, you can include the following code in your animation:

.swal2-show {
  animation: swal2-show .5s !important; 
}

To customize your modal, you can make changes to:

.swal2-modal {
  background-color: rgba(63,255,106,0.69) !important;
  border: 3px solid white;
  position: relative !important;
  top: 100px !important;
}

Here's an example:

swal('Custom animation speed')
.swal2-show {
  animation: swal2-show .5s !important; 
}
.swal2-modal {
  background-color: rgba(63,255,106,0.69) !important;
  border: 3px solid white;
  position: relative !important;
  top: 100px !important;
}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7"></script>

Keep in mind that using !important should be done thoughtfully, and if possible, it's preferable to use direct selectors instead of !important.

For updating the Toast: You would need to modify

.swal2-popup.swal2-toast.swal2-show

.swal2-popup.swal2-toast.swal2-show {
  background-color: rgba(63,255,106,0.69) !important;
  border: 3px solid white;
  position: relative !important;
  top: 20px !important;
  -webkit-animation: swal2-show .5s !important;
  animation: swal2-show .5s !important;
}

Codepen

Answer №2

If you want to customize the appearance of a pop-up, you can use the following code snippet:

Swal.fire({
      icon: "success",
      title: "Success title!",
      text: "Success Body",
      toast: true,
      position: "top-right",
      showClass: {
        popup: "animate__animated animate__bounceInRight",
      },
      hideClass: {
        popup: "animate__animated animate__bounceOutRight",
      },
    });

You can apply custom CSS to the popup property in showClass and hideClass to control the animation of the toast notification.

This solution has been effective in my experience.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the ins and outs of utilizing pseudo selectors with material-ui

I've been attempting to accomplish a simple task. I wanted to toggle the visibility of my <TreeMenu/> component in material UI v1 using pseudo selectors, but for some reason it's not working. Here is the code: CSS: root: { ba ...

Four divs containing texts of varying sizes

I have varying sizes of text that I would like to organize into 4 divs in the center of the page, similar to this image http://firepic.org/images/2015-08/22/0b0r536o40es.png However, it seems that my pink div is causing the ones below it to be pushed down ...

Scroll overflow can be hidden

I'm working on a project with a div containing scrollable content, but I'm struggling to get the header to overflow its parent element. It seems that using overflow: scroll is causing the element to have overflow: hidden as well. Any assistance ...

Stack the text on top of each other beside an image

Here is some HTML code that I am working with: <div class="row"> <div col-md-9> <div> <img class="img-valign" src="an image"> <span class="text1" Style="font-size: 8 ...

Is there a way to create a mobile-exclusive slideshow using JavaScript?

I am trying to create a slideshow on my website, but whenever I add JavaScript it seems to break the desktop version. I want these three pictures to remain static and only start sliding when viewed on a mobile device. I have searched for resources on how t ...

Adding spacing breakpoints in Material-UI 5 sx properties

Currently in the process of updating my components to utilize the latest MUI version. I have been converting old classes into the sx props and I find this new styling method to be more readable in my opinion. However, one thing that concerns me is handl ...

Streamlining programming by utilizing localStorage

Is there a more efficient way to streamline this process without hard-coding the entire structure? While attempting to store user inputs into localStorage with a for loop in my JavaScript, I encountered an error message: CreateEvent.js:72 Uncaught TypeErr ...

An unexpected background image appearing from an external CSS file

I need to dynamically change the background image of a class using an external CSS file. The image should be randomly selected from a specified path. While I know how to achieve this in PHP, I am looking to implement it in the external CSS file instead. ...

Adjusting color schemes for Twitter Bootstrap Tooltips according to their placement

I have been attempting to customize the colors of tooltips (specifically from Twitter Bootstrap), but I am encountering some difficulties. While changing the default color was straightforward, altering the colors for .tooltip and its related definitions ha ...

Ways to manage the gap among flex items

I'm currently going through some educational material on Codeacademy, and I'm curious about how I can control the spacing between the "locations" text and the three divs below it. The task requires me to create a 15px gap between them, but I am u ...

Hiding divs toggle off when either all or only one is selected

In a certain page, there is a script that displays a div when a user selects an option. The script functions correctly, except for a scenario where if the user selects 'd' (which shows 'a', 'b', and 'c'), and then se ...

Obtain the text from an altered stylesheet in Firefox

I am currently programmatically updating stylesheets for a web page using JavaScript. My method involves having a local copy of the page and all associated assets stored on a server. After I finish making changes to the stylesheets, my goal is to save the ...

Getting rid of any excess space between columns within the same row in Bootstrap following a line

Exploring Bootstrap 3. When you test the following HTML and CSS code, everything appears as expected with no space above 768px. However, upon reaching that breakpoint, the divs start stacking on top of each other, which is fine. But suddenly, a mysterious ...

The problem with Text Input and Label Effects

This code is currently in use. It seems to be working fine, but there's one issue that needs addressing: when moving from one input field to the next, the labels for each field are getting mixed up with their corresponding inputs. This problem will b ...

Implementing CSS animations in ReactJS: A guide to activating onClick and onHover events

Is there a way to activate the onClick and onHover CSS animations for the ReactJS button component below? I attempted to use ref = {input => (this.inputElement = input)}, but I only see the animation when clicking the button. <td> ...

Use of absolute positioning resulted in the disappearance of the element

Can anyone assist with resolving the issue I am encountering? I currently have three nested divs as follows: <div class="section"> <div class="parent"> <div class="child"> Some random text. </div> </div> </div> To adj ...

The addClass method in jQuery is failing to append the specified class to the element

I'm currently working on a registration form that includes selecting your gender: My goal is to have the male icon turn blue when clicked, and the female icon turn pink. The color change currently works when hovering, but not when clicked. Here is th ...

Looking to bookmark Java links or a similar task?

Apologies for the lackluster title, as I am not well-versed in programming language and struggle to articulate my specific request... Allow me to explain: I frequently need to visit a particular website to conduct research (details below). I attempted usi ...

Tips for creating a vertical Angular Material slider with CSS

Attempting to modify the angular material directive to render vertically has been a challenge. I experimented with using transform:rotate in the CSS, however, it resulted in the slider behaving and rendering differently. md-slider { position: absolute ...

Guide on applying CSS to option tag within a select element in VUE.js

I am attempting to design a dropdown menu that resembles the one shown in the image. However, I'm currently unable to include any CSS styling. Can anyone provide guidance on how to create a customizable select dropdown in Vue? https://i.stack.imgur.c ...