smooth transition for notifications

Issue

Im making notifications for my website but when they delete one by one it just teleports to the top, but i want it to smoothly transition between it, what i mean by this is when the notification deletes it is "teleporting" to the top and not just smoothly go to it

my code

html:

<div class="notifications">
</div>

js:

var notification_max = 5;
function notification(title, content, type){
  if(document.querySelectorAll('.notification').length > 5) return
  function icon(){
    if(type == 'error') return '<i class="fal fa-exclamation-triangle"></i>'
    if(type == 'message') return '<i class="fas fa-comment-alt-dots"></i>'
  }
  var htmlContent = `
      <div class="icon">
        ${icon()}
      </div>
      <div class="text">
        <div class="title">${title}</div>
        <div class="content">${content}</div>
      </div>
  `
  var newNotification = document.createElement('div')
  newNotification.classList = "notification"
  newNotification.innerHTML = htmlContent
  
  document.querySelector(".notifications").appendChild(newNotification)
  window.setTimeout(()=>{
    document.querySelector(".notifications").removeChild(newNotification)
  },2000)
}


notification("Title", "Content", "error")

here is link to codepen if it can help: LINK

Solution

Maybe when removing a notification, you move it around before removing it (with CSS):

1. Move it off the screen to the left.
2. Move it up to be in line with the notification above it.
3. Remove it.

Then it will look like an animation.

I hope this works for you!

Answered By - ProgrammerG