Как реализовать анимацию скролла на js, без jq?

Question

[vaskadogana]

Помогите п-ж-та,
делаю горизонтальный скролл, вроде доводчика при скролле на мобильных, чтобы компонент получался в нужной части окна

if(this.startx > this.endx){//touch to right
				this.route.scrollLeft =  this.route.scrollLeft + this.list.children[0].offsetWidth;
			}
			if(this.startx < this.endx){
				this.route.scrollLeft =  this.route.scrollLeft - this.list.children[0].offsetWidth;
			}

читал тут примеры https://learn.javascript.ru/js-animation

если можно, то хотелось бы использовать такой тип анимации

function quad(progress) {
  return Math.pow(progress, 2)
}

не могу сообразить как увязать завязать анимацию на время, чтобы не остановилось раньше времени.
пробую писать, что-то вроде

let curr = this.route.scrollLeft;
		if(this.startx > this.endx){//to right
			let need = this.route.scrollLeft + this.list.children[0].offsetWidth;
			 for(let i = curr; i <= need; i++){
			    let int  = setTimeout( ()=>{
			    	console.log('to right', i, need) 
		   			this.route.scrollLeft = i;
		   		}, 300
		   		)
			}
		}
		if(this.startx < this.endx){//to left
			let need = this.route.scrollLeft - this.list.children[0].offsetWidth;
		   for(let i = curr; i >= need; i--){
		   		let int  = setTimeout( ()=>{
		   			console.log('to left', i, need) 
		   			this.route.scrollLeft = i;
		   		}, 300
		   		)
		  	}
		}

Comments

[kulaeff]

Не используйте setTimeout для задания анимации. Лучше использовать requestAnimationFrame. И что значит "чтобы не остановилось раньше времени"?

[vaskadogana]

kulaeff,

И что значит "чтобы не остановилось раньше времени"?

вот пример, https://jsfiddle.net/xv03g0uu/3/
как сделать, чтобы квадрат сместился на значение переменной bias, за 200 мс duration
p.s. приходит в голову только
setTimeout(stop(), 200);

[vaskadogana]

kulaeff, в моем случае получается примерно вот так, не пойму как сюда вписать время, а в идеале чтобы анимация была в таком по этой кривой

let curr = this.route.scrollLeft;
		var requestId = 0;
		let now = window.performance.now();
		function quad(progress) {
						  return Math.pow(progress, 2)
						}
		let animate = (time) => {
			 var progress = (time - now) / 200;
			console.log(progress, time - now );
				if(progress>1){
					progress = 1
				}
				
				if(this.startx > this.endx){//to right
				   			this.route.scrollLeft = curr + (this.list.children[0].offsetWidth*progress);
				}
				if(this.startx < this.endx){//to left
				   			this.route.scrollLeft = curr - (this.list.children[0].offsetWidth*progress);
				}
				if(progress == 1){
					stop()
					return
				}
			  requestId = window.requestAnimationFrame(animate);
			}
			function start() {
			 	let animationStartTime = window.performance.now();
			  	requestId = window.requestAnimationFrame(animate);
			}
			function stop() {
			  if (requestId)
			    window.cancelAnimationFrame(requestId);
			  requestId = 0;
		}
		if(Math.abs(this.endx - this.startx) > 10 ){
			start();
		}

Answer 1

[vaskadogana]

написал такой вот рабочий код

let curr = this.route.scrollLeft;
		var requestId = 0;
		let now = window.performance.now();
		function quad(progress) {
						  return Math.pow(progress, 2)
						}
		let animate = (time) => {
			 var progress = (time - now) / 200;
			console.log(progress, time - now );
				if(progress>1){
					progress = 1
				}
				
				if(this.startx > this.endx){//to right
				   			this.route.scrollLeft = curr + (this.list.children[0].offsetWidth*progress);
				}
				if(this.startx < this.endx){//to left
				   			this.route.scrollLeft = curr - (this.list.children[0].offsetWidth*progress);
				}
				if(progress == 1){
					stop()
					return
				}
			  requestId = window.requestAnimationFrame(animate);
			}
			function start() {
			 	let animationStartTime = window.performance.now();
			  	requestId = window.requestAnimationFrame(animate);
			}
			function stop() {
			  if (requestId)
			    window.cancelAnimationFrame(requestId);
			  requestId = 0;
		}
		if(Math.abs(this.endx - this.startx) > 10 ){
			start();
		}

если у кого есть получше решение, прошу в комментарии