Physics of momentum scrolling

Alexey, EPAM

http://alexeykomov.me

I will speak of

• GMail for iOS web app algo
• How it can be useful

Inertia

First law of motion

Bodies with different mass

History

When did native implementations appear?

...can we?

The problem

Google's GMail solution

How did they implemented this?

We can find out by...

• Blog post
• Looking into code

Three "T"s

• Transform
• Translate
• Transition

Let's divide algo to three parts

Part 1 - deceleration

Natural deceleration - in motion

And in physics?

$v = v_0 +\hspace{0.17em}at$

$x = x_0 + v_{0}t +\hspace{0.17em}\frac{a{t}^2}{2}$

Let's see some code

doMomentum() {
  const transition =
      `transform ${time
      }ms cubic-bezier(0.33, 0.66, 0.66, 1)`;

  this.setTransition(this.element, transition);

  this.setTransform(this.element,
      `translate3d(0, ${newY}px, 0)`);
}

Three "T"s

• Transform
• Translate
• Transition

Code

doMomentum() {
  const transition =
      `transform ${time
      }ms cubic-bezier(0.33, 0.66, 0.66, 1)`;

  this.setTransition(this.element, transition);

  this.setTransform(this.element,
      `translate3d(0, ${newY}px, 0)`);
}

What about time and Δx?

$t=\frac{v-v_0}{a}$

$\Delta x=\frac{v^2-{v_0}^2}{2a}$

And acceleration (well... it's deceleration)?

$a =0.005\raisebox{1ex}{$px$}\!\left/ \!\raisebox{-1ex}{${\mathrm{ms}}^2$}\right.$

Code

doMomentum() {
  const transition =
      `transform ${time
      }ms cubic-bezier(0.33, 0.66, 0.66, 1)`;

  this.setTransition(this.element, transition);

  this.setTransform(this.element,
      `translate3d(0, ${newY}px, 0)`);
}

Natural deceleration

cubic-bezier(.33, .66, .66, 1)

Natural deceleration - in motion

Part 2 - snap to bounds

Snapping to bounds

What if we're past the bounds?

snapToBounds() {
  const transition = 'transform' +
    '500ms ease-out';
  this.setTransition(this.element,
      transition);

  this.setTransform(this.element,
      `translate3d(0, ${startY}px, 0)`);
}

Snap to bounds

cubic-bezier(0, 0, .58, 1), ease-out

Snapping to bounds

Part 3 - crossing the bounds

Crossing the bounds

Code for the first part

const valueToLowerCubicBezierWith =
    Math.abs(this.endMomentumVelocity_ /
    velocity) * .33;

const transition =
    `transform ${time}ms cubic-bezier(.33,${
    (.66 - valueToLowerCubicBezierWith)
    },.66,${
    (1 - valueToLowerCubicBezierWith)})`

this.setTransition(this.element, transition);
this.setTransform(this.element,
    `translate3d(0, ${this.contentOffsetY
    }px, 0)`);

What about speed when crossing bounds?

And time?

$v=\sqrt{{v_0}^2-2a∆x}$

$t=\frac{v-v_0}{a}$

Custom bezier curve depending on end velocity

Crossing the bounds

We understood Google's algorithm

How can we use it?

Solution

The problem

Solution

It's open-sourced

npm install momentum-scroller

Send pull requests to https://github.com/alexeykomov/momentum-scroller

Demo is here

Presentation is here

Contacts

http://alexeykomov.me

alexeykcontact@gmail.com

Wanna thank

• Ryan Fioravanti (@rjfioravanti) - for Gmail scrolling
• Reveal.js - for presentation engine
• Lea Verou - for cubic-bezier.com
• Wiris  - for a MathML editor
• qrcoder.ru  - for QR codes
• Unsplash.com - for gorgeous photos

Thx for your attention