How to make smooth movement?

Question

JavaScript

How to make an object move smoothly? I can’t take the jQuery option, I don’t need it for javascript.
Here's how it is here, for example: otvety.google.ru/answer/ , in the "Popular Topics" block.
I looked at the jQuery code, I didn’t find anything there, everything is not so open there.
My attempts:
First, I decided to practice on Javascript: move a div smoothly
First, I made this option:
d = distance
t - time for which you need to go distance d, in seconds
t1 - initial time
Here is a snip from the code:

t1 = new Date();
setTimeout(move);

function move() {
  var t2 = new Date();
  if ((t2 - t1)/1000 > t) {
    div.style.left = d + 'px';
  }
  else {
    div.style.left = ((t2 - t1) / (1000 * t)) * d + 'px';
    setTimeout(move, 50);
  }
}

But it's not that, not as smooth as in Google Answers.
Then I tried to add acceleration:

var a = 1.5;//во сколько увеличивать скорость
var at = 1;//через какое время увеличивать скорость в a раз (a / at — это ускорение)
...
function move() {
  ...
  else {
  var t0 = (t2 - t1) / (1000 * t);
  div.style.left = (t + t * a/at) * d + 'px'
  setTimeout(move, 50);
  }
  ...
}

It didn't work either.
Tell me if you know.

Answer 1

I didn’t delve into the code much, I hit at random:
Perhaps you are talking about easing.
If we represent the time from the beginning of the animation to the end as an interval from 0 to 1, and the initial position of the object (or other property) and the end also as an interval from 0 to 1, then the ising function is a function that gives each point of the first interval a point of the second.
In the simplest case, the ising function returns the received value without changes (it returns 0 for the initial moment of time, and 1 for the final one). In this case, the object moves strictly linearly without accelerations and decelerations, which is why the movement seems jerky and unnatural.
To give the animation a smoother look, you need to simulate acceleration. In jQuery, the default ising function is (simplified):

function swing(t) {
  return (-Math.cos(p*Math.PI)/2) + 0.5;
}

Those. sinusoidal dependence is used.
Here are examples of how other easing functions that are connected by a third-party plugin and are not part of jQuery:
www.lemonsanver.com/jQuery/easingAnimationPlugin.html
In order to use the same method of working anywhere, you need to organize process as follows:
1) At the start of the animation, its duration is known and the animation start time is recorded
2) the final value of the parameter being animated (or several) is also known, their initial value is recorded.
3) The animation function (timer, or cycle) is periodically called. From the current time, the start time of the animation, and the required duration, it finds the time t - a number from 0 to 1.
4) t is passed to the ising function
5) The current value is calculated from the obtained value and data on the initial and final values ​​of the parameters.
6) Item 3) is repeated until the animation time runs out.

Answer 2

You can read about animation in JS here .

Answer 3

Look at this site: jstween.blogspot.com/
There is an implementation in js of smooth movement of objects.
If suddenly it doesn’t work, then try to search Google for the phrase:
motion tween algorithm