Page four: iPhone that moves up

Before we animate the iPhone and icons (and light trails), we should bring them to our screen. (Otherwise, they would move up and down in their current artboard, which is somewhere to the right of our screen.)

Just setting their parent to null would do the trick, it would lift them out of their artboard (‘Page 4’) and bring them over. But we want to place them in our “container”, like the other content.

There’s the iPhone with the light trails in front and behind it. I joined them in a parent layer called phone_and_trails.

phone_and_trails.parent = container

And then there are the four app icons:

ios_photos.parent = container
ios_notif.parent = container
ios_location.parent = container
ios_contacts.parent = container

Things should now look like this:

Saving the end positions of the iPhone and icons

Before we move them to their start positions, somewhere below the screen, we’ll save their current positions, so that we know where they should end up.

We’ll use a different technique this time.

Instead of creating extra variables we’ll simply save their positions inside the layers themselves in a new saved property (saved is just a name I picked).

phone_and_trails.saved = phone_and_trails.point
ios_photos.saved = ios_photos.point
ios_notif.saved = ios_notif.point
ios_location.saved = ios_location.point
ios_contacts.saved = ios_contacts.point

We need both x and y, so we save point, a property that contains both.

Moving the iPhone and icons off-screen

With a loop through an array of these five layers (the iPhone and trails + the four icons), we place all of them one screen height lower.

for layer in [phone_and_trails, ios_photos, ios_notif, ios_location, ios_contacts]
    layer.y += page.height

The above ‘addition assignment operator’, +=, is just a shorter way of writing:

    layer.y = layer.y + page.height

Animating the iPhone and light trails back up

The iPhone’s current position is now:

phone_and_trails.saved.y + page.height

Meaning: it’s original y in its saved property, plus the page.height.

And we want is to be at…

phone_and_trails.saved.y

…when scrolled to the fourth screen.

So that looks like this when modulating its y position:

phone_and_trails.y = Utils.modulate page.scrollX,
        [page.width * 2, page.width * 3],
        [phone_and_trails.saved.y + page.height, phone_and_trails.saved.y], yes