Page six: Switching from ‘Create Account’ to ‘Sign in’ mode

Many things move around when you switch between these modes.

Here’s what happens when you transition from the (default) ‘Create Account’ to the ‘Sign in’ mode:

• The ‘Username,’ ‘Email’ and ‘Password’ placeholder texts fade out.
• The ‘Create Account’ label on the white button disappears.
• The small ‘Reset Password’ text link fades in.
• The block with input fields shrinks from 3 fields to only 2.
• The ‘Username or Email’ and ‘Password’ placeholder texts fade in.
• The ‘Sign in’ label appears on the white button.
• The ‘Already have an account? Sign in!’ text disappears.
• The ‘Don’t have an account? Sign up!’ text appears.

Of course, there’s also the reverse: returning from ‘Sign in’ to ‘Create Account’ mode, and there’s a third mode, ‘Reset password.’

All together it’s an impressive list of property changes and animations, but we’ll do them step by step.

We’ll first create the transitions between ‘Create Account’ and ‘Sign in,’ and will add ‘Reset password’ afterward.

Hidden layers

Where is all the text that will appear, like the placeholder lines and alternative button labels? Well, those layers are already there, they’re just hidden.

The white button contains two more labels, label_sign_in and label_reset_password. Their visible is switched off.

And the same is true for the banner that will appear in place of the current ‘Already have an account? Sign in!’ at the bottom of the screen. The banner_sign_up layer contains the ‘Don’t have an account? Sign up!’ text, and is also not visible.

The placeholder texts are also there, but they have their opacity dialed down to zero. Look for placeholders_sign_in and placeholder_reset_password. Here we use opacity instead of visibility because we will fade them in and out.

And there are two more layers; I’ll point them out.

• reset_password_small is the small ‘Reset Password’ text link that will appear under the input fields.
• And there’s cancel_small, a similar text link for canceling the ‘Reset password’ mode.

Both of them have zero opacity.

Using States to change the number of input fields

Placed on top of the placeholder texts are the borders of the input fields.

These three input fields are actually a combination of two images.

There’s the top one, form_fields_top. It’s only 5 points high, and we will not move it or animate it.

And positioned directly below it is form_fields. It’s placed inside another layer, fields_mask, that masks it.

This way we can move form_fields upwards to make just two fields (‘Sign in’ mode), or only one field (‘Reset password’ mode) visible at a time. We’ll do this with different States.

We move the layer upwards by changing its y position to a negative value.

# Changing the amount of visible fields
form_fields.states =
    createAccount:
        y: 0
    signIn:
        y: -45
    resetPassword:
        y: -88

We also change form_fields’s default animation curve to a spring curve, and set the duration of its animations.

form_fields.animationOptions =
    time: 0.35
    curve: Spring(damping:0.7)

To test these states we can temporarely make form_fields react to a tap:

form_fields.onTap ->
    this.stateCycle()

You’ll have to tap twice to get back to "signIn" because there’s still a fourth state: "default".

(Yes, we could have used the "default" state instead of adding a fresh "createAccount" state. But this way it’ll always be clear which mode we’re switching to.)

Adding the interactivity

It’s a good idea to gather all the animations that we’ll run in a function. We’ll call it switchToMode(), and it will take only one argument: the mode we want to switch to.

# Function to switch between modes
switchToMode = (mode) ->

The first mode we want to switch to is "signIn". In it we first fade out the current placeholder texts (underneath the input fields):

    if mode is "signIn"
        # Hide ‘Create account’ placeholder text
        placeholders_create_account.animate
            opacity: 0
            options:
                time: 0.25

A quarter of a second later, when the placeholder texts have disappeared, we want to do a bunch of things:

        Utils.delay 0.25, ->
            # Hide ‘Create Account’ button label
            label_create_account.visible = no
            # Show ‘Sign in’ button label
            label_sign_in.visible = yes
            # Hide ‘Already have an account?’ text
            banner_sign_in.visible = no
            # Show ‘Don’t have an account?’ text
            banner_sign_up.visible = yes
            # Resize to only 2 input fields
            form_fields.animate "signIn"

• Hide the ‘Create Account’ label on the white button,
• …and show the ‘Sign in’ button label in its place.
• Hide ‘Already have an account? Sign in!’ at the bottom of the screen.
• Show ‘Don’t have an account? Sign up!’ in the same spot.
• And animate our form_fields layer’s to its "signIn" state so that it moves up to make only two input fields visible.

With a 0.5” animation we also fade in the small ‘Reset Password’ text. (Giving it a 0.25” delay, so it happens together with the former changes.)

        # Show small ‘Reset Password’ text
        reset_password_small.animate
            opacity: 1
            options:
                time: 0.50
                delay: 0.25

The moment the form_fields state change has finished (after ~ half a second), we can fade in the placeholder texts for the (currently two) input fields.

        # Show ‘Sign in’ placeholder text
        placeholders_sign_in.animate
            opacity: 1
            options:
                time: 0.25
                delay: 0.50

All set. Only one thing remains: to trigger our switchToMode() function when the user taps on banner_sign_in…

banner_sign_in.onTap ->
    switchToMode "signIn"

…and see all those changes take place in… less than a second (0.75″).