Pages four and five

Next up: the page with the iPhone that moves up from the bottom.

You know the drill:

# PAGE 4
page.addPage page_4_content

This layer, page_4_content, only contains the “Unlock the power of special Channels on your iPhone” text at the top.

The other elements: the iPhone, four app icons, etc. all move up from the bottom, so we’ll animate them separately.

We can already add the fifth page so that it’ll be ready for those icons. (Three of the icons will move from page four to page five.)

# PAGE 5
page.addPage page_5_content

There’s one more thing we have to do to the recipe_arrows, though: when scrolling from the third to the fourth page, the arrows should move faster to the left than the other elements—1.5x times faster.

To accomplish this, we do the reverse of what we did to the recipe: we move the arrows to the left while they’re already being scrolled to the left. Like this:

# from page 3 to page 4
recipe_arrows.x = Utils.modulate page.scrollX,
    [page.width * 2, page.width * 3],
    [r_arrow_x, r_arrow_x - (page.width * 1.5)], yes

When we’re on page four, the arrows will be positioned 1.5 times the ‘page width’ farther to the left.