Page transition hint

Code Overrides
Updated: 2018-12-29


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.


0. Override currentPage prop of Page

export const HintPage: Override = () => {
  return {

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 = 1
  await animate.ease(dummy, 1, { duration: 0.01 }).finished = 0

2. Show the hint when loaded

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

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

Also see this tip.


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!

Source Code

Check out the complete source code here