Page six

The sixth and final page. Let’s add its ‘content’ layer to the PageComponent, which in this case contains everything on that page.

# PAGE 6
page.addPage page_6_content

You’ll notice that the app icons (Location, Photos, and Contacts) stay put when we scroll to page six. They should move off-screen.

Let’s fix that. Start by adding this line to the page.onMove block:

# from page 5 to page 6
if page.scrollX >= page.width * 4

It’ll make sure that the lines we’re adding will only be executed when scrolling between pages five and six.

Inside the if block we place the lines that will move the three icons to the left at scrolling speed:

for icon in [ios_photos, ios_location, ios_contacts]
    icon.x = Utils.modulate page.scrollX,
            [page.width * 4, page.width * 5],
            [icon.p5.x, icon.p5.x - page.width], yes
Download Framer project

Just as earlier with other elements (e.g., the iPhone + light trails and the Notifications icon), we made them also follow the scroll movement.

Page six

Leave a Reply