Skip to main content
Question

Dynamic mobile navigation bar animation effect when scrolling

  • January 22, 2024
  • 8 replies
  • 1342 views

Brennan_Hom

Is it possible to create a navigation bar effect like Twitter’s mobile app of the profile screen as you scroll up and down? Basically a new style navigation bar comes in as you begin to scroll down the screen.

This topic has been closed for replies.

8 replies

Gayani_S
Figmate
  • Community Support
  • 2078 replies
  • January 23, 2024

Hey Brennan, could you show a screen recording with me what you’d like to achieve? I don’t have the mobile app. Also in the community you can find a lot of template for Twitters UI design. Feel free to have a look at it too: https://www.figma.com/community/search?resource_type=files&sort_by=relevancy&query=twitter+mobile&editor_type=figma&price=all&creators=all


Brennan_Hom

I’ve tried, but it’s saying that new users can’t upload media. However, if you have the Twitter apps and scroll up and down, you’ll see how the navigation bar converts into 2 different styles as you do so.

This is the effect that I’m trying to replicate, but can’t seem to figure out how to do so.


  • Figmate
  • 2002 replies
  • January 26, 2024

Hi @Brennan_Hom Thanks for letting us know! As you said, there seems to be a limit on uploads for new community members to post, appreciate your understanding!

I checked X app on my mobile, and I saw an animation where the navigation bar at the bottom of the screen disappears when you scroll up and reappears when you scroll down.
Is that what you want to achieve? Hope to hear from you soon!

Thanks,


Brennan_Hom

The top navigation bar I was referencing to! Not the bottom.


  • Figmate
  • 2002 replies
  • January 26, 2024

Hi there, I appreciate your reply! I can see how important for you to achieve this design.

For the top bar, it seems like the same animation. It disappears when you scroll up and reappears when you scroll down. If that’s not what you want to achieve, could you please tell us more?
If you are already working on your file, would you mind sharing that with a brief explanation?

Thank you for your help!
If anyone else has any ideas, feel free to jump in!


Brennan_Hom

Yes so I’m looking to recreate that design style and animation where the cover photo is part of the top navigation bar and slowly gets smaller and blurs to create a sticky navigation as you scroll up.

Also when the user’s display name scrolls past the navigation bar, it then becomes part of the navigation bar where it now shows the display name, number of posts, and a follow bottom (on the right hand side) as you continue scrolling.


  • Figmate
  • 2002 replies
  • January 29, 2024

Hi there, Thanks for letting us know the details!
We’ve been looking into this internally, I will update you once I gather more information.

In the meantime, please feel free to explorer our community on your own!
If anyone has any ideas on how to achieve this, please jump in!


  • Figmate
  • 2002 replies
  • February 2, 2024

Hey, Thank you so much for your patience!
After consulting with our internal team, seems reproducing any animation triggered “on scroll” might be a bit challenging. Probably possible to try creating two frames (one with a large icon, one with a small one) and connecting them with smart animate using the “on drag” trigger.

However, I came across this idea in our community, and it’s got quite a few votes for on-scroll interactions: “On Scroll” for prototyping
We can’t make any guarantees or promises, but you can vote and comment on this idea. It might be a step towards making this design a reality in the future.

Feel free to check it out!


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings