UX Design for Mobile

FAB button event reacting

A common behavior for the FAB button is to move out of the screen when the user scrolls down and reappears when the user scrolls up. Let's encode that behavior in our prototype:

# FAB BUTTON# Fab Buttons Statessketch.FAB_Button.states =    stateIn:        y: 1551        animationOptions:            time: 0.2    stateOut:        y: 1551+400        animationOptions:            time: 0.2

To define this behavior, we have created two states for this button: one off the screen that we will call stateOut, and another inside the screen that we will call stateIn:

The FAB button has two states, inside of the screen (left) and out of the screen (right)

Now, we will add the behavior ...