Page six: White button and Sign-in banner
Not all the elements on page six are static. The white button, for instance, slides in from the right. It also becomes a bit transparent when you tap it.
White button tappable
The button animates to 75% opacity when pressed down, and returns to 100% when released.
That’s easy to accomplish with
white_button.onTapStart -> this.animate opacity: 0.75 options: time: 0.2
white_button.onTapEnd -> this.animate opacity: 1 options: time: 0.2
Horizontal animation of the button
The white button slides in from the right at twice the scrolling speed.
This means that while we’re on page five the button should be placed an extra page width to the right, and when we would scroll to (hypothetical) page seven, it should be that same distance farther to the left.
white_button.x = Utils.modulate page.scrollX, [page.width * 4, page.width * 6], [page.width + 25, -page.width + 25], yes
The code above will result in the button moving faster, but on page six it will be right where it belongs:
25 points from the left edge.
Horizontal animation of the Sign-in banner
With the ‘Already have an account? Sign in!’ banner at the bottom happens something similar, but at only half those distances.
banner_sign_in.x = Utils.modulate page.scrollX, [page.width * 4, page.width * 6], [(page.width*.5)+25, -(page.width*.5)+25], yes