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 )