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.
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,
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
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_smallis 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.
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:
(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.)
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_fieldslayer’s to its
"signIn"state so that it moves up to make only two input fields visible.
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.onTap -> switchToMode "signIn"
…and see all those changes take place in… less than a second (0.75″).