Trick to Show/Hide Header on Scroll in Figma
HTML-код
- Опубликовано: 2 июн 2024
- 🔥 Start using Figma for FREE → bit.ly/TryFigma
🔗 Join our design community here → bit.ly/DX-Community
How to Show/Hide App Header on Scroll in Figma. Here is a simple trick that you can use to hide and unhide the app header on scrolling down. This trick can be used in web and mobile app prototyping, as the user scrolls down the header will be hidden and as the user scrolls back to the top the header will be shown.
#ShowHideHeader #Figma #FigmaTutorialSeries
⏱️Timestamps:
0:00 - Intro
0:48 - Demo
1:11 - Getting Started
1:45 - Explaining the Trick
3:44 - Final Output
📄Resources:
Code used in the demo: www.figma.com/community/file/...
🔴 Don't forget to Subscribe. Trust me it's absolutely FREE - bit.ly/SubToDesignXstream 😅
🎉 Join our Whatsapp Community now, it's FREE: bit.ly/DX-Community
You have got some ideas or topics in mind? Please do comment below we will make sure to check it out and do it if possible 🥳
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
🌍 Social Media:
↪︎ LinkedIn - / designxstream
↪︎ Instagram - / designxstream
↪︎ Facebook - / designxstream
↪︎ Twitter - / designxstream
↪︎ Website - DesignXstream.com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
🏷 Tags: Trick to Show/Hide Header on Scroll in Figma, show header on scroll, hide header on scroll down, show header on scroll up, show hide app header on scroll in figma, figma prototype to hide show header, how to hide header on scrolling down in figma, how to show header on scrolling up in figma.
Clever trick ! Thanks man ! I improved your technique with "while hovering" on an empty frame which trigger "open overlay" (with "move in" from top & ease out 200ms). It almost behave the same as a real app
That's awesome. Thanks for sharing your solution with everyone here 🙌🏼
Excelent. This is very helpful to controll animations.
Thanks. I was able to show the team my design idea.
Awesome! Cheers ✌️
Its 3:55 AM, I've been working on a particular type of website showcasing. Got stuck trying to achieve something similar and have been trying multiple ways.
This video is so 'to the point' and informative that I couldn't help but switch to normal from incognito and like n subscribe right away.
Amazing work man, keep up the good work.
Thanks man! Your comment made my day 🙌🏼 🤩
Thanks so much! This really helped with showing the team how a collapsable navigation on scroll works! Legend!
Glad it was helpful! :)
Excelent yo!!! I've been strugglin' with this interaction and worked arround it with "on drag" trigger, but it only worked for short scroll distances. THANK YOU SO MUCH.
Glad you liked the trick! :)
Exactly what I was looking for. Easy to follow. You've earned a subscriber in me. Thank you so much.
Thanks buddy! Glad you found it useful ✌🏼
Awesome thanks man! I didn't think it would be possible in Figma, this was a great help.
Cheers! ✌🏼 Glad you found it helpful :)
i was looking for a tutorial like this one for DAYYYYS ! it's so helpful ! thank you so much
Glad you found it helpful 👍🏼
Me tooooooooo!
Great man!
Hey Suchit, Glad you liked it :)
Thanks for the tips! 🎉
Cheers mate ✌🏼
This was very helpful and exactly what I was looking for. Thanks for making it :)
Hey Andrew, I'm glad you found this helpful! Cheers ✌🏼 :)
That was awesome. Thanks, man.
Glad you enjoyed it! :)
i looking for many times and ive find this, thank you.
Glad I could help :)
Thanks for sharing this!
Glad you enjoyed it! :)
Really helpful! Thank you
Awesome! Cheers ✌🏼
very helpful! Thank you
Glad you found it helpful! Cheers ✌🏼
Thank you for this :) I needed this in my work - youre my savior
Glad I could help! :)
Very nice!!! Thank you so much!
Glad you like it! Cheer ✌🏼
Thank you for this!
Glad it was helpful! :)
This is so cool, bro!
Glad you like it :)
Whoa, thank you! You're a life saver!
Glad it helped! :)
Impressive, thx!
Thanks! Cheers ✌🏼
Thanks so much. I was wracking my brain on how to do something with an On Scroll action.
Just a hack! 😉 Glad you enjoyed the video ✌🏼
Thanks so much bro!
Glad you liked it! Cheers ✌🏼
what a useful video bro... and so easy... thanks
Glad you found it useful.. Cheers! ✌🏼
Nice Explain Thank you
Glad you liked it! Cheers ✌🏼
Thanks a lot, that's what i want !!! NICE TUTs
That's awesome! Cheers ✌🏼
Very nice!!! thanks!!! bro
Cheers! Glad yu liked it.
thank you guru!
Cheers buddy ✌🏼
great !!!
🤘🏼😃
appreciate the video:)) also have a question, on the layer panel, under the frame of iphone 11 pro, how you made the FIXED and SCROLLS section?i can't find it anywhere.
you can select any layer and on the right you have to enable 'Fix on position on scrolling' this will add a new section in layers Fixed & Scrolls!
thanks so much! this helped me a ton
Cheers ✌🏼
yay, that's really smart, thx
Cheers! ✌🏼
2:23 It's important to make the grouping BEFORE duplicating. If you duplicate and then making the grouping in the first and second frames then it will make the animation flicker back and forth between the two states. Edit: This may not be true. I'm stuck with the same flickering problem. What seems to work is making another group above the original "Mouse Trigger" grouping, and not simply making the one and then connecting it to the sister frame like what is seen in the video. So you will need two mouse triggering groups per frame.
Flickering issue will come if you don't mark Preserve scroll position as true. You can duplicate the community file and try it.
@@DesignXstream Right, my navi bar in my second frame some how was grouped with another unfixed asset and the "fix position when scrolling" function was broken.
flickers for me regardless and I have both instances set to reset scroll position :(
How would you do something like the unfolding of these 5 "homepod minni" at the apple "apple homepod-mini" page (Please google it because I can't paste the link here) ???? It seems that with every scroll it progresses one frame. Is there a possibility to do the trick you teaches using the "scroll or windows position in Y axis" instead of the mouse position? So it depends on the position of the screen and not the position of the mouse?
Thank you for the tutorial. And, any thoughts about my question are welcome.
Hey Ernesto, I get your question. But unfortunately this is not possible on Figma at this point as Figma doesn't yet have the feature to get onScrolling Offset data. This is possible only on advanced prototyping tools like Protopie, framerX, etc.
Thanks!
Cheers ✌🏼
nice hack there! love it
🤘🏼😃
What did you use to get the carrier, cell bars, wifi and battery icons up at the top? They look to be in their own frame the same width as the notch in the new iPhones. Did you have to lock it in place?
Just select the frame or group and enable 'Fix position on scrolling'.
thanks amazing
Cheers ✌🏼
is there anyway in figma to create a secondary nav that is sticky? so if you scroll down on mobile, the nav bar at the top scrolls, but the secondary nav gets sticky to the top of the mobile screen. Any guidance on how to do that would be greatly appreciated!
At the moment there is no workaround for that. Figma doesn't have any on scroll events/triggers so such type of interactions are not yet possible.
2:50 Thanks for the tutorial! I need to hide both top and bottom navigation when I scroll. But I think the mouse trigger only makes one navigation move. Could you please recommend how I can make both top and bottom navigation bar disapear when I scroll? I am new to Figma and no where to ask 😢😢 thank you, appreciate your video!!
Firstly this trick only works on Desktop... it doesn't work in mobile preview!
And for hiding both also you can use the same try...in the second state frame just hide both top and bottom when mouse enter a certain region. Ping me @designxstream on Insta if you still need help.
Is there a way to do this but instead of having the mouse as the trigger, have a static invisible point or object at a certain point on the screen as the trigger. For example if said trigger object was in the middle of the screen then when the second post in your example moves underneath the middle of the screen, the prototype navigates to the second page without the header? If this is possible it would work on mobile preview!
Currently, there is no way to trigger an interaction based on scroll actions. This is the only work around and it doesn't work in mobile preview!
Thank you so much for sharing. Does the 'mouse enter' trigger also works when testing the prototype on a mobile device?
Hey Michelle, Unfortunately no this trick doesn't work on a mobile device. It works only on desktop!
@@DesignXstream that means for mobile it is "fixed to scroll position" that will work right?
@@DesignXstream Is there a way to hide/show buttons when scrolling on a mobile device?
@@rayes.s2024 No! On a mobile, there is no workaround to achieve this interaction.
Just wondering can headers also smart animation to a different form while scrolling in Figma?
Using this same work around you can trigger the header to smart animate to a different variant.
thanks
cheers ✌🏼
Hi,
I am a designer in training, I was wondering whether we can scroll an up and when it reaches the it gets pinned at the top.
Is that possible?
I saw a lot of video but was not able to find answers
I showed a similar behaviour of showing a shadow in the end of this video, you can use the same trick.
If you still have queries ping me @designxstream on Insta.
THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU!
You are so welcome! 😄
This example is very useful, however I'm wondering how this approach works if you have many pages like in a design system
Hey Marco, figma has come up with a new feature of sticky header. You can explore this.
@@DesignXstream Thank you for the answer. yes but what is missing is a behaviour when scrolling. That's the issue so far.
Yes, for that we only have this hack. We can make this as an interactive component and place it on multiple screens but wouldn't recommend it. This hack is just good for quick presentations.
@@DesignXstream I see, thank you
How would you have a scrolleable list like instagram but also have a side scrolling thing like stories?
Hey Kevin, you can use multiple overflow behaviour in a single frame. So you just have to set Horizontal flow for the stories group and vertical flow for the posts.
You can check this video by Figma: ruclips.net/video/ST6DOO11zuA/видео.html
does the stories also swipe in the design \
We have place a container at the bottom so the stories can be make scrollable.
How about if i want show different top nav bar while i scrolling down?
Just replace it with the different top nav in the second frame. There might be a slight jerk but it must work!
Do yoy know an option for mobile prototypes? Because he have not mouse on mobile and it does not work
There is no hack for mobile prototypes.
@@DesignXstream thanks
Is there a way we can do this trick at any part of the page ? when i scroll up the header shows and it hides when i scroll down. ?
No, there isn't any trick possible for that behaviour.
@@DesignXstream Thanks for responding. BTW, loved the video !
@@shankardeniro Thanks buddy! 🙌🏼
I'm making a Social Media App, May I use this or it's working ? 😢
This is a hack you can use it anywhere!
Nice trick, but not perfect. I played a bit with placing frames on top of each other and having them both be scrollable. The issue I had is that it selects the secondary frame first. It might still be possible but very difficult and counterintuitive.
Yah this is not perfect it is just a workaround! Hope Figma (aka Adobe) comes up with some scroll interaction triggers!
❤️
🤘🏼😃
Hi! It doesn't work on Figma Morror on iPhone
Yes! I've already mentioned this in the start of the video that it will not work on a mobile device as hover feature works only on desktop!
This is useful when you demo it to user on your desktop.
his sound so familiar
Does it? 😄
Its way too complicated, XD does is better.
Yes... even the new sticky header feature is not useful for this scenario!
Facebook rolled a feature some months ago, where the NAV BAR (bottom) hides when you start scrolling down, and it shows up again when you scroll up a bit. I need this same feature for my current project... I wish it was possible to do this in Figma!!! Apparently I will have to move to Protopie instead, just for this feature 😕
Yes unfortunately there is no way we can detect scroll in Figma. So this is the only workaround possible.