Page transition hint

Overview

As an affordance of the page swipe interaction, slightly move the page as if the user dragged the page and then returns to the initial view.

Requested by Maximilian Bredow.

Recipe

0. Override currentPage prop of Page

export const HintPage: Override = () => {
  ...
  return {
    currentPage: data.page
  };
};

1. Set to the next page and then quickly set it back

async function hint() {
  const dummy = Animatable(1)
  await animate.ease(dummy, 1, { duration: 1 }).finished
  data.page = 1
  await animate.ease(dummy, 1, { duration: 0.01 }).finished
  data.page = 0
}

2. Show the hint when loaded

export const HintPage: Override = () => {
  if (hintShown === false) {
    hint();
    hintShown = true;
  }
  ...
};

Note: we need this hintShown to guard the hint() call, otherwise, the animation will be repeated infinitely.

Also see this tip.

Limitation

The animation is a bit jarring. I haven't found a way to slow it down or customize it in any way. Please comment below if you know a better solution!