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
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
No place for this one on page five. It also fades out, a bit slower though: over a distance of
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