Vue directive, for scrolling to the bottom of an element after updating. Using TweenJS/Tween.js

gistfile1.txt

import Vue from 'vue';
import TWEEN from 'tween.js';

var scrollDownAnimation = false;
var scrollDownFunction = function(el) {
	var scrolledToBottom = el.scrollHeight - el.scrollTop === el.clientHeight;
	if (scrolledToBottom) return;
	
	if (scrollDownAnimation) {
		scrollDownAnimation.stop();
	}

	scrollDownAnimation = new TWEEN.Tween({ tweeningNumber: el.scrollTop })
		.easing(TWEEN.Easing.Exponential.Out)
		.to({ tweeningNumber: el.scrollHeight - el.clientHeight }, 1000)
		.onUpdate(function () {
	  		el.scrollTop = this.tweeningNumber.toFixed(0)
		})
		.onComplete(function() {
			scrollDownAnimation = false;
		})
	.start();

	function animate () {
		if (TWEEN.update()) {
			requestAnimationFrame(animate);
		}
	}

	animate()	
}

Vue.directive('scroll-down', function(el, binding) {
	window.setTimeout(function() {
		scrollDownFunction(el);
	}, 100);
});