Scroll any element horizontally with smooth animation without any library.

animate-elem-horizontal-scroll.js

const easeInQuad = (t, b, c, d) => {
	return c * (t /= d) * t + b;
}

const requestAnimFrame = (() => {
  return  window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); };
})();

export const scrollElementLeftTo = (element, to, duration = 400, callback) => {
	const move = (amount) => {
    element.scrollLeft = amount;
  }
  const position = () => {
    return element.scrollLeft;
  }

	const start = position();
  const change = to - start;
	const increment = 50;

  let currentTime = 0;

  const animateScroll = () => {
    currentTime += increment;
    /* You can use any easing function here */ 
    let val = easeInQuad(currentTime, start, change, duration);
    move(val);
    if (currentTime < duration) {
      requestAnimFrame(animateScroll, increment);
    } else {
			if (position() <= 0) {
				move(0);
			}
			callback && typeof callback === 'function' && callback();
		}
  };
  animateScroll();
}

Call scrollElementLeftTo method with params

element: element to scroll
to: position to scroll body
duration: optional duration in ms to animate scrolling (defaults: 400ms)
callback: optional callback to be called after animation is fininshed

scrollElementLeftTo (document.getElementById('carouselDiv'), 400, 500, ()=>{console.log('scrolling animation finished')})