Code
Interactive Tools
Code Override
Framer X

Keep Page and Slider in sync, without getting stuck

Overview

Keep the positions of a slider and a page in sync. This sounds straightforward but there’s a catch: the page/slide will stop moving after the first run, if we don’t take some special care.

Key points

Props

  • Page props:

    • currentPage
    • onChangePage
  • Slider props (I’m using this one in the example)

    • value
    • onValueChange

Prevent infinite loop

We’ll run into an infinite loop if we write the code override like this:

export const Page: Override = () => {
  return {
    currentPage: data.currentPage,
    onChangePage(value) {
      data.currentPage = value;
    }
  };
};

You see, if the onChangePage event is fired, it’ll set data.currentPage which will call onChangePage again!

To prevent this from happening, we’ll use a conditional to guard it:

export const Page: Override = () => {
  return {
    currentPage: data.currentPage,
    onChangePage(value) {
      if (data.currentPage !== value) {
        data.currentPage = value;
      }
    }
  };
};

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!


© 2018 jimu Labs, Inc.