Code
Code Overrides
Framer X

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!

PS: If you find this tip difficult to understand, check out this course I prepared for you, where concepts are explained in a more digestible way. No programming experience required!

PPS: See other pro tips, or share / request a new tip.


download Want the complete source file? Enter your email address below:

I'll also send you new tips when available. No spam, unsubscribe any time!


© 2019 jimu Labs, Inc.