Display Toast Messages with Smooth Slide/Fade Animations – Toastiin

Toastiin is an ultra-light JavaScript notification library that displays customizable toast messages with smooth slide/fade animations.

It supports four notification types—success, warning, error, and info—each with distinctive visual styling and icons. You can position notifications in any corner of the screen and apply various animation effects as they appear and disappear.

More Features:

• Positioning: Top-left, top-right, bottom-left, bottom-right.
• Slide Animations: To-left, to-right, to-top, to-bottom.
• Auto-Hide: Set a duration for automatic closing.
• Close Button: Allow users to dismiss toasts manually.

How to use it:

1. Download the package and load the main script toastiin.js in the document.

<script src="toastiin.js"></script>

2. Create a container element in your HTML to hold the toast notifications:

<div id="toastiin-container"></div>

3. Use the showToast() method to display notifications. The method accepts an object with the following parameters:

showToast({
  // success, warning, error, info
  type: 'success',        
  // toast message
  messageUser: 'Toast message here',  
  // top-left, top-right, bottom-left, bottom-right
  position: 'top-right',  
  // to-left, to-right, to-top, to-bottom
  transitionIn: 'to-left', 
  // Time in milliseconds before auto-dismiss
  duration: 3000,
});

4. Example implementation showing different toast types and positions:

// Success toast in the top-right
document.getElementById('show-success').addEventListener('click', () => {
  showToast({
    type: 'success',
    messageUser: 'Operation completed successfully!',
    position: 'top-right',
    transitionIn: 'to-left',
    duration: 3000
  });
});
// Error toast in the bottom-left
document.getElementById('show-error').addEventListener('click', () => {
  showToast({
    type: 'error',
    messageUser: 'An error occurred while processing your request.',
    position: 'bottom-left',
    transitionIn: 'to-top',
    duration: 4000
  });
});
// Warning toast in the top-left
document.getElementById('show-warning').addEventListener('click', () => {
  showToast({
    type: 'warning',
    messageUser: 'Please save your changes before leaving this page.',
    position: 'top-left',
    transitionIn: 'to-right',
    duration: 5000
  });
});
// Info toast in the bottom-right
document.getElementById('show-info').addEventListener('click', () => {
  showToast({
    type: 'info',
    messageUser: 'New features have been added to your account.',
    position: 'bottom-right',
    transitionIn: 'to-bottom',
    duration: 3500
  });
});

5. Adjust the CSS within the style block of toastiin.js to modify background colors, padding, fonts, and animations.

* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; }
#toastiin-container { position: fixed; z-index: 1000; display: flex; flex-direction: column; gap: 10px; }
.top-right { top: 20px; right: 20px; }
.top-left { top: 20px; left: 20px; }
.bottom-right { bottom: 20px; right: 20px; }
.bottom-left { bottom: 20px; left: 20px; }
.toast { display: flex; align-items: center; gap: 10px; min-width: 250px; max-width: 300px; padding: 12px 16px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-size: 14px; color: white; opacity: 0.9; transition: transform 0.3s, opacity 0.3s; transform: translateY(-100%); }
.success { background: #2ecc71; }
.warning { background: #f1c40f; }
.error { background: #e74c3c; }
.info { background: #3498db; }
.icon { font-size: 18px; }
.message { flex-grow: 1; }
.close-btn { background: transparent; border: none; font-size: 18px; color: white; cursor: pointer; }
.close-btn:hover { opacity: 0.7; }
.toast.to-left { transform: translateX(100%); }
.toast.to-right { transform: translateX(-100%); }
.toast.to-top { transform: translateY(100%); }
.toast.to-bottom { transform: translateY(-100); }

FAQs:

Q: Can I use Toastiin with React, Vue, or Angular?
A: Yes. Since Toastiin is built with vanilla JavaScript, it works with any framework. Simply include the script in your project and call the showToast() function when needed.

Q: Can I stack multiple notifications?
A: Yes. The notifications stack vertically in the container, with new notifications appearing below (or above, depending on positioning) existing ones.

Q: Is it possible to change the notification icons?
A: Yes. You can modify the icons by editing the HTML template in the showToast() function within the toastiin.js file.

Q: Can I create custom notification types beyond the default ones?
A: Yes. You can add new CSS classes for additional types and modify the JavaScript to support them. You’ll need to update both the CSS definitions and the icon selection logic.

Q: How can I disable the auto-close feature?
A: Set the duration parameter to a very high value (e.g., 999999) or modify the library code to remove the timeout function that closes the notification.