Pages two and three: Instagram example recipe

Everything seems to work, so we’ll add a few more pages.

We can now add the page_2_content as a second page. This layer is also the size of the artboard and contains two layers: the recipe itself and the “Recipes are connections between Channels” text underneath it.

# PAGE 2
page.addPage page_2_content

We also save the x position of the recipe, instagram_recipe, because we’ll need to correct its horizontal position in the next step.

# save initial x position of the recipe
i_recipe_x = instagram_recipe.x

(Place the code before the page.onMove -> block.)

Page three has only one image: the one with the arrows that point to different parts of the recipe. But again, this recipe_arrows layer is placed in page_3_content, a parent that’s the size of the artboard.

# PAGE 3
page.addPage page_3_content
# save initial x position of the arrows
r_arrow_x = recipe_arrows.x

And again, we’ll tweak the arrows’ speed later on, so we save their x position in a variable: r_arrow_x.

Notice that the Instagram and Google Calendar icons stay in front of the recipe while the other icons fly behind it. This is exactly like it was in the original app.