Animating the app icons between pages four and five

Two things should happen at the same time when we scroll from page four to page five: the icons should shrink a bit, and change their position.

The shrinking part is easy: On page four the icons have their original size of 91 points; on page five they’ll only be 40 points wide and high.

For the repositioning part we’ll save the new x and y positions also inside the layers, in a p5 property (short for ‘page 5’), like this:

# Positions of the app icons on page 5
ios_photos.p5 =
    x: 82
    y: 244

ios_location.p5 =
    x: 84
    y: 114

ios_contacts.p5 =
    x: 82
    y: 373

(Place this code above the page.onMove -> block.)

All set. We can now change the size of all three icons from 91 to 40:

for icon in [ios_photos, ios_location, ios_contacts]
    icon.size = Utils.modulate page.scrollX,
                [page.width * 3, page.width * 4],
                [91, 40], yes

In theory, we could have used scale, but setting the size is easier because it will retain the top left position of the icon.

(Scale works from the center, if you don’t change the transformation origin, that is.)

And we change their x and y to the values that were saved in each’s personal p5 property.

    icon.x = Utils.modulate page.scrollX,
                [page.width * 3, page.width * 4],
                [icon.saved.x, icon.p5.x], yes
    icon.y = Utils.modulate page.scrollX,
                [page.width * 3, page.width * 4],
                [icon.saved.y, icon.p5.y], yes

Something is wrong, though: the icons suddenly appear on all pages.

For some reason, the earlier changes to their y-position are ignored, even though both sets of Utils.modulate have their ‘limit’ set to yes. This might be a bug in Framer.

Anyway, it’s easy to solve. Place the new lines in the following if block, to ensure that they’ll only be executed when we’re on page four or higher.

# limitation, to not override earlier changes
if page.scrollX >= page.width * 3