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 onTapStart and onTapEnd events.

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