IF by IFTTT » Page six: Switching back to ‘Create Account’ mode

Page six: Switching back to ‘Create Account’ mode

We want to be able to switch back to ‘Create Account,’ so we add it as a possible mode to our function:

    else if mode is "createAccount"

Here we do more or less the opposite.

First, we fade out the current placeholder texts underneath the input fields.

        # Hide the ‘Sign in’ placeholder text
        placeholders_sign_in.animate
            opacity: 0
            options:
                time: 0.25

Same for the small ‘Reset Password’ text: we animate it to zero opacity. (This time a bit faster.)

        # Hide small ‘Reset Password’ text
        reset_password_small.animate
            opacity: 0
            options:
                time: 0.25
                delay: 0.25

Next up, also after a 0.25” ? Delay:

  • Hide the ‘Sign in’ button label.
  • Show the ‘Create Account’ button label.
  • Hide ‘Don’t have an account? Sign up!’.
  • Show ‘Already have an account? Sign in!’.
  • Slide the form_fields layer back down, to three visible fields.
        Utils.delay 0.25, ->
            # Hide ‘Sign in’ button label
            label_sign_in.visible = no
            # Show ‘Create Account’ button label
            label_create_account.visible = yes
            # Hide ‘Don’t have an account?’ text
            banner_sign_up.visible = no
            # Show ‘Already have an account?’ text
            banner_sign_in.visible = yes
            # Resize to 3 input fields
            form_fields.animate "createAccount"

And finally, we fade in the placeholder texts.

        # Show ‘Create Account’ placeholder text
        placeholders_create_account.animate
            opacity: 1
            options:
                time: 0.25
                delay: 0.50

And we’ll trigger all this with a tap on the ‘Don’t have an account? Sign up!’ text at the bottom of the screen.

banner_sign_up.onTap ->
    switchToMode "createAccount"
Download Framer project
Switching between the ‘Create Account’ and ‘Sign in’ modes