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