scroll-snap doesn't scroll smoothly

Question

I have like a grabbing effect where when we hold an element it scrolls normally but on mouseup it gives scroll-snap to the container and children so that it stops at the start of the element, but when it gives the class to the element it aligns immediately and not smoothly like when the class is always there, how can I make it animate?

// DISABLE SELECTION FOR ELEMENTS
const childs = Array.from(document.querySelector('.container').children)
childs.forEach(undrag)
function undrag(e) {
    e.setAttribute("draggable", "false")
    e.style.cssText="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;" 
    e.unselectable="on"
    e.onselectstart="return false;" 
    e.onmousedown="return false;"
    const subchilds = Array.from(e.children)
    subchilds.forEach(undrag)
}

// GRABBING EFFECT
const container = document.querySelector('.container')
let mousedown = false;
document.body.onmousedown = () => {mousedown = true}
document.body.onmouseup = () => {mousedown = false}
let firstpos;
let currentpos;
let currentscroll;
// Remove smooth scrolling and scrol-snap for free scrolling and get the scroll/cursor positions
container.addEventListener('mousedown', down)
function down(e) {
    currentscroll = container.scrollLeft
    firstpos = e.clientX
    container.style.cssText="scroll-behavior: initial; scroll-snap-type: none;"
    childs.forEach(e => {
        e.style.cssText="scroll-snap-align: none;"
    })
}
container.addEventListener('mousemove', move)
function move(e) {      //  Grab Effect
    if (mousedown === true) {
        currentpos = e.clientX
        const moved = currentpos - firstpos
        container.scroll((currentscroll - moved), 0)
    }
}
// Add smooth scrolling with scroll-snap on releasing mouse
container.addEventListener('mouseup', up)
function up() {
    container.style.cssText="scroll-behavior: smooth; scroll-snap-type: x mandatory;"
    childs.forEach(e => {
        e.style.cssText="scroll-snap-align: start;"
    })
}

* {
  box-sizing: border-box;
}

.container {
    background-color: #202225;
    color: #fff;
    width: 100%;
    display: flex;
    overflow: scroll;
}

.container::-webkit-scrollbar {
    display: none;
}

.child {
    min-width: 20%;
    backgroud-color: #40444B;
    border: 3px solid #648CFF;
    text-align: center;
}

<div class="container">
  <div class="child">
    <h3>First Element</h3>
  </div>
  <div class="child">
    <h3>Element</h3>
  </div>
  <div class="child">
    <h3>Element</h3>
  </div>
  <div class="child">
    <h3>Element</h3>
  </div>
  <div class="child">
    <h3>Element</h3>
  </div>
  <div class="child">
    <h3>Element</h3>
  </div>
  <div class="child">
    <h3>Element</h3>
  </div>
  <div class="child">
    <h3>Element</h3>
  </div>
  <div class="child">
    <h3>Element</h3>
  </div>
  <div class="child">
    <h3>Last Element</h3>
  </div>
</div>