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:
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.