Stop the Instagram example recipe from moving

You probably already know what needs fixing. The “Recipes are connections…” text should scroll, and the arrows as well, but the Instagram recipe itself should not move, it should be in the same position on pages two and three.

This means we have to move the Instagram recipe to the right while scrolling so that it will stay put. And this has to happen only when scrolling from page two to page three.

After page three we can leave it be so that it will scroll off-screen.

The following code will do just that. Add it to the page.onMove block.

# from page 2 to page 3
instagram_recipe.x = Utils.modulate page.scrollX,
        [page.width, page.width * 2],
        [i_recipe_x, i_recipe_x + page.width], yes

We take the distance scrolled, scrollX, and pass it through ? Modulate to set the recipe’s x position.

When the scrolling distance is between page two (page.width) and page three (page.width * 2), we map it to a value between the recipe’s original x position (i_recipe_x) and the same position on the next page.

Setting modulate’s ‘limit’ to yes (the last argument, at the end) makes sure these changes will only occur between pages two and three.