Framer Classic » IF by IFTTT » Animating the icons around the iPhone

Animating the icons around the iPhone

All icons will move to the right when we scroll to the second page, only at different speeds.

First we save the original x positions of the icons, so that we have a base value to which we can apply a speed multiplier. Each icon’s position goes in a separate variable:

# save the icons’ initial x positions
w_x = weather.x
r_x = rss_feed.x
f_x = facebook.x
g_x = gmail.x
s_x = stocks.x
sc_x = soundcloud.x
i_x = instagram.x
c_x = calendar.x

Next step: We listen to the PageComponent’s onMove event.

We move the icons by taking their original position (saved in w_x, i_x…) and adding it to the PageComponent’s scrollX distance, multiplied by a relative speed factor.

E.g., the Soundcloud icon moves at the scrolling speed, the Instagram and Stocks icons at 1.5x that speed, and the others, well, see below:

# Move event
page.onMove ->
    # from page 1 to page 2
    weather.x       = w_x  + ( page.scrollX * 1.7 )
    rss_feed.x      = r_x  + ( page.scrollX * 0.9 )
    facebook.x      = f_x  + ( page.scrollX * 0.55 )
    gmail.x         = g_x  + ( page.scrollX * 0.4 )
    stocks.x        = s_x  + ( page.scrollX * 1.5 )
    soundcloud.x    = sc_x + page.scrollX
    instagram.x     = i_x  + ( page.scrollX * 1.5 )
    calendar.x      = c_x  + ( page.scrollX * 1.3 )
Download Framer project
Animating the icons

Leave a Reply