All geek questions in one place

Understanding how scroll animation works

I am creating functionality scrollToon my website and building it on this answer . Since I don't want to just copy and paste the code, I'm trying to figure it out. I was able to understand everything (took me 2 days!), In addition, for the mathematical part of c scrollToX function.

element.scrollTop = xFrom - (xFrom - xTo) * motion(t01);
t01 += speed * step;

I understand real math, but I don’t understand why it works. Why does this math do scroll animation?

Jsfiddle

document.getElementsByTagName('button')[0].onclick = function() {
  scrollTo(0, 1000);
}

// Element to move, time in ms to animate
function scrollTo(element, duration) {
  var e = document.documentElement;
  if (e.scrollTop === 0) {
    var t = e.scrollTop;
    ++e.scrollTop;
    e = t + 1 === e.scrollTop-- ? e : document.body;
  }
  scrollToC(e, e.scrollTop, element, duration);
}

// Element to move, element or px from, element or px to, time in ms to animate
function scrollToC(element, from, to, duration) {
  if (duration <= 0) return;
  if (typeof from === "object") from = from.offsetTop;
  if (typeof to === "object") to = to.offsetTop;

  scrollToX(element, from, to, 0, 1 / duration, 20, easeOutCuaic);
}

function scrollToX(element, xFrom, xTo, t01, speed, step, motion) {
  if (t01 < 0 || t01 > 1 || speed <= 0) {
    element.scrollTop = xTo;
    return;
  }
  element.scrollTop = xFrom - (xFrom - xTo) * motion(t01);
  t01 += speed * step;

  setTimeout(function() {
    scrollToX(element, xFrom, xTo, t01, speed, step, motion);
  }, step);
}


function linearTween(t) {
  return t;
}

function easeInQuad(t) {
  return t * t;
}

function easeOutQuad(t) {
  return -t * (t - 2);
}

function easeInOutQuad(t) {
  t /= 0.5;
  if (t < 1) return t * t / 2;
  t--;
  return (t * (t - 2) - 1) / 2;
}

function easeInCuaic(t) {
  return t * t * t;
}

function easeOutCuaic(t) {
  t--;
  return t * t * t + 1;
}

function easeInOutCuaic(t) {
  t /= 0.5;
  if (t < 1) return t * t * t / 2;
  t -= 2;
  return (t * t * t + 2) / 2;
}

function easeInQuart(t) {
  return t * t * t * t;
}

function easeOutQuart(t) {
  t--;
  return -(t * t * t * t - 1);
}

function easeInOutQuart(t) {
  t /= 0.5;
  if (t < 1) return 0.5 * t * t * t * t;
  t -= 2;
  return -(t * t * t * t - 2) / 2;
}

function easeInQuint(t) {
  return t * t * t * t * t;
}

function easeOutQuint(t) {
  t--;
  return t * t * t * t * t + 1;
}

function easeInOutQuint(t) {
  t /= 0.5;
  if (t < 1) return t * t * t * t * t / 2;
  t -= 2;
  return (t * t * t * t * t + 2) / 2;
}

function easeInSine(t) {
  return -Mathf.Cos(t / (Mathf.PI / 2)) + 1;
}

function easeOutSine(t) {
  return Mathf.Sin(t / (Mathf.PI / 2));
}

function easeInOutSine(t) {
  return -(Mathf.Cos(Mathf.PI * t) - 1) / 2;
}

function easeInExpo(t) {
  return Mathf.Pow(2, 10 * (t - 1));
}

function easeOutExpo(t) {
  return -Mathf.Pow(2, -10 * t) + 1;
}

function easeInOutExpo(t) {
  t /= 0.5;
  if (t < 1) return Mathf.Pow(2, 10 * (t - 1)) / 2;
  t--;
  return (-Mathf.Pow(2, -10 * t) + 2) / 2;
}

function easeInCirc(t) {
  return -Mathf.Sqrt(1 - t * t) - 1;
}

function easeOutCirc(t) {
  t--;
  return Mathf.Sqrt(1 - t * t);
}

function easeInOutCirc(t) {
  t /= 0.5;
  if (t < 1) return -(Mathf.Sqrt(1 - t * t) - 1) / 2;
  t -= 2;
  return (Mathf.Sqrt(1 - t * t) + 1) / 2;
}
Very long page.Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page.Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
<button type="button">To the top</button>
Run code
+4
source share
2 answers

So, the motion function that you go through in your example easeOutCubic, which is defined as

function easeOutCubic(t) {
  t--;
  return t * t * t + 1;
}

-, t speed * step , scrollToX. , t 1 . t 1, -1, (0,1). , scrollToX, (t-1)^3 + 1 , . , t , (t-1) , (t-1) 0, (t-1)^3 0 , (t-1)^3 + 1 1 . - , d^2((t-1)^3)/dt^2 < 0 t < 1, .

motion(t) 0 1, (xFrom-xTo), , .

( , ):

t - , scrollToX , scrollToX ( ), , . linearTween , .

t 0 0,02 0,04, motion(t) . motion(t), 0 1 ( , , 1) , (xFrom-xTo), t. , , , , xFrom, t.

:

xTo = 100
|
|
||
||
||
xFrom = 200

, 100. , (t) = 0,6 ( ). , (t) = 0,6, 200- (100) * 0,6 xFrom - (xFrom - xTo)*motion(t).

+2

, Robert Penners

.

:

pf = p0 + motion(time)

where:

- p0 = initial position
- pf = final position

, , . , , ,

position = f(time)

y = f(x) 2d, , 1 ,

position as a function of time

slope

m = (pf - p0) / (1 - 0) = pf - p0                 (1)

px 0 < t < 1, , ,

m = (px - p0) / (t - 0) = (px - p0) / t           (2)

(1) (2) px

pf - p0 = (px - p0) / t
t * (pf - p0) = px - p0
px = p0 + (pf - p0) * t

( - )

:

  • if t = 0, px = p0
  • t = 1, px = pf

, t, , 0 <= t <= 1, , t . motion(t) :

motion(0) = 0
motion(1) = 1

, px , :

const linear = t => t

- :

const quadratic = t => t * t


px = p0 + (pf - p0) * motion(t)

, , , t , t0, tf

tf = t0 + delta(t)

, / , delta(t) k, k > 1, k < 1 , :

px = p0 + (pf - p0) * motion(t0)
tf = t0 + k * delta(t)
// the final time will be the initial time for the next iteration
t0 = tf

, , 0,5 ( ) k = 2, 2,0 ( ) k = 0.5, k :

k = 1 / duration
+2

Source: https://habr.com/ru/post/1654053/

More articles:


All Articles