Framer Classic » IF by IFTTT » Page four: Animating the app icons

Page four: Animating the app icons

The iOS icons rise alongside the iPhone, each with its own light trail.

Three of the icons will then carry on to the fifth page. The fourth icon, Notifications, will fade out together with the light trails.

The layers are ios_photos, ios_notif, ios_location and ios_contacts. We change their y position of course, but also scale them up a bit: from 0.50 their size to their actual size.

for icon in [ios_photos, ios_notif, ios_location, ios_contacts]
    icon.y = Utils.modulate page.scrollX,
        [page.width * 2, page.width * 3],
        [icon.saved.y + page.height, icon.saved.y],
        yes
    icon.scale = Utils.modulate page.scrollX,
        [page.width * 2, page.width * 3],
        [0.50, 1], yes
Open in Framer
The app icons moving up and resizing

Leave a Reply