Protopie Fixed Tab Bar On Transition

Have you ever scrolled through a mobile app and noticed how the header and surrounding buttons smoothly hide away when you scroll downward, only to slide back into view when you scroll upward? This sticky header experience allows users to fully immerse themselves in the content, whether it’s browsing photos, reading an interesting blog post, or exploring a list of items while shopping.

The good news is, you can easily create this realistic and delightful experience in ProtoPie. With the help of ProtoPie’s built-in formulas and conditioning functionality, you’ll be able to perfect the fixed tab bar on transition in no time!

What you will learn

  1. Create a scroll container to make a scrollable view
  2. Detect the scroll property of the scroll container
  3. Use a condition and formulas to check the scroll direction
  4. Add separate interactions based on the scroll direction

In the end, you’ll be able to create an experience like this:

Protopie Fixed Tab Bar On Transition

Step-by-step instructions

1. Create a scroll container to make a scrollable view

To begin, let’s create a basic page with scrolling enabled.

  1. From the toolbar, go to Container and select Scroll Container. This will create a container with scrolling enabled. Rename the container to “Scroll” for easy reference.
  2. Scale the “Scroll” container to fit the screen. You can either drag one of the corners to resize it or enter the dimensions as 375 x 812 and set the position to 0,0. This ensures that the container covers the entire screen.
  3. Reorder the “Scroll” layer to be right above the “Card list” layer in the layers panel. This prevents unwanted taps where the cards are not visible.
  4. Drag the “Card list” layer inside the “Scroll” container in the layers panel. This makes the “Card list” layer scrollable.
  5. Preview the prototype by clicking the Preview button on the toolbar.

2. Detect the scroll property of the scroll container

Now, let’s set up the interaction to detect scrolling in the scene.

  1. In the interaction panel, click Add Trigger and select Detect. Make sure the selected layer is “Scroll” and change the default value from X to Scroll.
    • Note: Selecting “Scroll” as the trigger will detect any changes to the scroll position of the “Scroll” layer.

3. Use a condition and formula to check scroll direction

With scrolling detection in place, we can now set up a condition to trigger different responses based on the scroll direction (upward or downward).

  1. In the interaction panel, under the Detect trigger, click + to add a new response and choose Condition.
  2. In the condition’s properties panel, click on the layer dropdown and change it to Formula.
  3. Click on the formula bar and type $touchVelocityY.
    • The $touchVelocityY formula returns the velocity of touch movement along the Y-axis. It allows us to determine the direction of scrolling. For example, scrolling downward will have a value < 0, while scrolling upward will have a value > 0.
  4. The condition will now check the entire screen for touch movements.

4. Add separate interactions based on scroll direction

Let’s add interactions for both upward and downward scroll directions.

  1. For scrolling downward:

    • In the condition’s properties panel, select < (less than) and set the value to 0. This condition will trigger when the touch velocity is negative, indicating downward scrolling.
    • In the interaction panel, click + under Detect and add a Move response. Select the “tabBar” layer and set it to Move To the position 812 on the Y-axis. Leave the X coordinates empty. This moves the tabBar layer to the bottom of the screen during downward scrolling.
    • To move the “Header” layer as well, click + under Detect and add another Move response. Select the “Header” layer and set it to Move To the position 0 on the Y-axis. This moves the Header layer to the top of the screen during downward scrolling.
  2. For scrolling upward:

    • Click + under Detect and add another Condition. Input the formula $touchVelocityY again, but this time select > and set the value to 0.
    • In the interaction panel, you will see a condition that says $touchVelocityY > 0.
    • Now you can repeat the earlier Move response to move the two layers back to their original positions, or use the Reset response for a more realistic transition.

💡 Tips and Tricks

Instead of using the Move response again for upward scrolling, you can maximize efficiency by using the Reset response.

  1. Click + under Detect and select Reset. Set it to the “tabBar” layer and choose “Ease out” as the easing option for a smoother transition. Repeat the same step and add another Reset response, but this time set it to the “Header” layer.
    • The Reset response simply resets the selected layer to its original position and state.

That’s it!

With these steps, you can easily create a fixed tab bar on transition in ProtoPie. Enjoy exploring the possibilities and creating delightful user experiences.

Did this tutorial help you? We would love to hear your feedback! Take a moment to participate in our 1-minute survey here to help us improve our educational content.