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
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.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
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
And we want is to be at…
…when scrolled to the fourth screen.
So that looks like this when modulating its
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