Page five: Moving the iPhone off-screen and fading out the light trails

You’ll notice everything will still stay on the screen when you get to page five. We don’t want that.

The iPhone should scroll off-screen, together with the light trails, and the light trails should also fade out.

The app icons, on the other hand, should animate into their positions in the ‘example recipes’ on page five (well, all but one).

We can move the phone and trails together because they are all children of phone_and_trails.

With this modulate line we make them scroll ‘manually’, like as if they were placed in the PageComponent.

phone_and_trails.x = Utils.modulate page.scrollX,
            [page.width * 3, page.width * 4],
            [0, -page.width], yes

The opacity transition of the trails happens faster. We fade them out completely over a scroll distance of only 20 points, like this:

for trail in [trail_left, trail_c_left, trail_c_right, trail_right]
    trail.opacity = Utils.modulate page.scrollX,
            [page.width * 3, (page.width * 3) + 20],
            [1, 0], yes

The Notifications icon

No place for this one on page five. It also fades out, a bit slower though: over a distance of 50 points.

ios_notif.opacity = Utils.modulate page.scrollX,
            [page.width*3, (page.width*3) + 50],
            [1,0], yes

And the icon also moves to the left, following the scroll movement.

ios_notif.x = Utils.modulate page.scrollX,
    [page.width * 3, page.width * 4],
    [ios_notif.saved.x, ios_notif.saved.x - page.width], yes