Trick to Show/Hide Header on Scroll in Figma

[@SylvainProov]

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

[@DesignXstream]

That's awesome. Thanks for sharing your solution with everyone here 🙌🏼

[@goncalodias4901]

Hey! Could you explain this technique in more detail? I wasn't able to understand it

[@yash-00-07]

Can you share it ??

[@shyamsharma7233]

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.

[@DesignXstream]

Thanks man! Your comment made my day 🙌🏼 🤩

[@natsyoutubingaway]

Thanks so much! This really helped with showing the team how a collapsable navigation on scroll works! Legend!

[@DesignXstream]

Glad it was helpful! :)

[@MintyZakiPocky]

Thanks so much. I was wracking my brain on how to do something with an On Scroll action.

[@DesignXstream]

Just a hack! 😉 Glad you enjoyed the video ✌🏼

[@Prz9474]

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.

[@DesignXstream]

Flickering issue will come if you don't mark Preserve scroll position as true. You can duplicate the community file and try it.

[@Prz9474]

@@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.

[@jakeatdevhub]

flickers for me regardless and I have both instances set to reset scroll position :(

[@juliangnzz]

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.

[@DesignXstream]

Glad you liked the trick! :)

[@BigAppleRedd]

i was looking for a tutorial like this one for DAYYYYS ! it's so helpful ! thank you so much

[@DesignXstream]

Glad you found it helpful 👍🏼

[@webbychen7639]

Me tooooooooo!

[@hungryhippoZz]

Exactly what I was looking for. Easy to follow. You've earned a subscriber in me. Thank you so much.

[@DesignXstream]

Thanks buddy! Glad you found it useful ✌🏼

[@Pratyushz]

Thanks. I was able to show the team my design idea.

[@DesignXstream]

Awesome! Cheers ✌️

[@MarkNDelaSanta]

Thank you for this :) I needed this in my work - youre my savior

[@DesignXstream]

Glad I could help! :)

[@bimasaktinugeraha4580]

i looking for many times and ive find this, thank you.

[@DesignXstream]

Glad I could help :)

[@gmarc5]

Thanks for the tips! 🎉

[@DesignXstream]

Cheers mate ✌🏼

[@andrewharlow84]

This was very helpful and exactly what I was looking for. Thanks for making it :)

[@DesignXstream]

Hey Andrew, I'm glad you found this helpful! Cheers ✌🏼 :)

[@r6506-ls5rz]

Thanks a lot, that's what i want !!! NICE TUTs

[@DesignXstream]

That's awesome! Cheers ✌🏼

[@adventuresoftrip1136]

Awesome thanks man! I didn't think it would be possible in Figma, this was a great help.

[@DesignXstream]

Cheers! ✌🏼 Glad you found it helpful :)

[@SarahAndBoston]

Amazing video, so helpful! And I've been wondering what "mouse enter" meant. TYVM!

[@DesignXstream]

Happy the video was helpful. If you have any other questions, I'm here to help!

[@georgeception]

Really helpful! Thank you

[@DesignXstream]

Awesome! Cheers ✌🏼

[@amruthesh]

That was awesome. Thanks, man.

[@DesignXstream]

Glad you enjoyed it! :)

[@ernestorodriguez4742]

Excelent. This is very helpful to controll animations.

[@rifqinfl]

Whoa, thank you! You're a life saver!

[@DesignXstream]

Glad it helped! :)

[@ernestorodriguez4742]

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.

[@DesignXstream]

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.

[@TheLastReview]

what a useful video bro... and so easy... thanks

[@DesignXstream]

Glad you found it useful.. Cheers! ✌🏼

[@tristancollera8668]

Thanks for sharing this!

[@DesignXstream]

Glad you enjoyed it! :)

[@michellema6541]

Thank you so much for sharing. Does the 'mouse enter' trigger also works when testing the prototype on a mobile device?

[@DesignXstream]

Hey Michelle, Unfortunately no this trick doesn't work on a mobile device. It works only on desktop!

[@TRBA_9]

@@DesignXstream that means for mobile it is "fixed to scroll position" that will work right?

[@rayes.s2024]

@@DesignXstream Is there a way to hide/show buttons when scrolling on a mobile device?

[@DesignXstream]

@@rayes.s2024 No! On a mobile, there is no workaround to achieve this interaction.

[@smallbetterbydulki9273]

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!!

[@DesignXstream]

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.

[@harrammohammadsingh]

This really helped

[@DesignXstream]

Glad you found it helpful! Cheers buddy ✌️

[@kaelmolo1432]

thanks so much! this helped me a ton

[@DesignXstream]

Cheers ✌🏼

[@cbrown940]

Impressive, thx!

[@DesignXstream]

Thanks! Cheers ✌🏼

[@hanamiller]

Thank you for this!

[@DesignXstream]

Glad it was helpful! :)

[@judge1319]

Wow 😊 03:05

[@DesignXstream]

Cheers! Glad you liked it! ✌🏼

[@ludmilarodrigues1717]

Very nice!!! Thank you so much!

[@DesignXstream]

Glad you like it! Cheer ✌🏼

[@raiha7398]

very helpful! Thank you

[@DesignXstream]

Glad you found it helpful! Cheers ✌🏼

[@suchitpoojari5752]

Great man!

[@DesignXstream]

Hey Suchit, Glad you liked it :)

[@davidvillavicencio998]

thank you guru!

[@DesignXstream]

Cheers buddy ✌🏼

[@choongching]

nice hack there! love it

[@DesignXstream]

🤘🏼😃

[@luchtaj]

This is so cool, bro!

[@DesignXstream]

Glad you like it :)

[@prakashanuvadia8870]

Nice Explain Thank you

[@DesignXstream]

Glad you liked it! Cheers ✌🏼

[@wrx95pro]

yay, that's really smart, thx

[@DesignXstream]

Cheers! ✌🏼

[@lukewu9232]

Very nice!!! thanks!!! bro

[@DesignXstream]

Cheers! Glad yu liked it.

[@adroaras]

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!

[@DesignXstream]

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.

[@JennyA]

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?

[@DesignXstream]

Just select the frame or group and enable 'Fix position on scrolling'.

[@TyranVz]

THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU!

[@DesignXstream]

You are so welcome! 😄

[@OzbegimMarketing]

Thanks so much bro!

[@DesignXstream]

Glad you liked it! Cheers ✌🏼

[@devinalaila5719]

thanks

[@DesignXstream]

cheers ✌🏼

[@mrajax_0101]

great !!!

[@DesignXstream]

🤘🏼😃

[@yajie5887]

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.

[@DesignXstream]

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!

[@marcosansalone]

This example is very useful, however I'm wondering how this approach works if you have many pages like in a design system

[@DesignXstream]

Hey Marco, figma has come up with a new feature of sticky header. You can explore this.

[@marcosansalone]

@@DesignXstream Thank you for the answer. yes but what is missing is a behaviour when scrolling. That's the issue so far.

[@DesignXstream]

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.

[@marcosansalone]

@@DesignXstream I see, thank you

[@RckDtar]

thanks amazing

[@DesignXstream]

Cheers ✌🏼

[@JoelleRijst]

Thanks!

[@DesignXstream]

Cheers ✌🏼

[@camilleqi5504]

Just wondering can headers also smart animation to a different form while scrolling in Figma?

[@DesignXstream]

Using this same work around you can trigger the header to smart animate to a different variant.

[@aurelliusbhat6773]

does the stories also swipe in the design \

[@DesignXstream]

We have place a container at the bottom so the stories can be make scrollable.

[@bradleymatthews9685]

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!

[@DesignXstream]

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!

[@madhumitabarik7450]

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

[@DesignXstream]

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.

[@adarshtiwari8242]

Bro, will this trick work on the navbar also? '''🤔

[@DesignXstream]

Yes it works on a navbar on websites as well. Same approach!

[@niachito]

Do yoy know an option for mobile prototypes? Because he have not mouse on mobile and it does not work

[@DesignXstream]

There is no hack for mobile prototypes.

[@niachito]

@@DesignXstream thanks

[@coffeeecatsss]

How about if i want show different top nav bar while i scrolling down?

[@DesignXstream]

Just replace it with the different top nav in the second frame. There might be a slight jerk but it must work!

[@dome_node]

How would you have a scrolleable list like instagram but also have a side scrolling thing like stories?

[@DesignXstream]

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: kzbin.info/www/bejne/iYWZdYKFZpatq6M

[@shankardeniro]

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. ?

[@DesignXstream]

No, there isn't any trick possible for that behaviour.

[@shankardeniro]

@@DesignXstream Thanks for responding. BTW, loved the video !

[@DesignXstream]

@@shankardeniro Thanks buddy! 🙌🏼

[@abhishekrathor7102]

I'm making a Social Media App, May I use this or it's working ? 😢

[@DesignXstream]

This is a hack you can use it anywhere!

[@No0bT4rD]

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.

[@DesignXstream]

Yah this is not perfect it is just a workaround! Hope Figma (aka Adobe) comes up with some scroll interaction triggers!

[@matiascarena603]

Hi! It doesn't work on Figma Morror on iPhone

[@DesignXstream]

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.

[@divaygupta7114]

❤️

[@DesignXstream]

🤘🏼😃

[@shirleymikan]

Just work on computer, but not work on figma mobile app.

[@DesignXstream]

yes works only on browser.

[@shirleymikan]

can use “on drag” > “smart animation” as linkage, that works on figma mobile preview

[@DesignXstream]

@@shirleymikan awesome... Thanks for sharing the solution!

[@samuelramaputra4170]

his sound so familiar

[@DesignXstream]

Does it? 😄

[@LorettaBangBang]

Its way too complicated, XD does is better.

[@DesignXstream]

Yes... even the new sticky header feature is not useful for this scenario!

[@beriadan77]

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 😕

[@DesignXstream]

Yes unfortunately there is no way we can detect scroll in Figma. So this is the only workaround possible.