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
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
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
y to the values that were saved in each’s personal
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