Bro, really thanks for this video. I had been trying on my own some way to do this interaction but I gave up and was looking for a tutorial hoping someone had done it. That was you.
the idea is good, but if you then try to use the navigation menu and you haven't passed the hero section, when the mouse goes over it again, you will reactivate the animation making the original sticky bar state reappear.
hi, i kind of have a problem when doing this. if i were to try and put my mouse on my showcase, it stays at the transparent part and if i move my mouse outside of my showcase then it will show my other version of navbar. the problem is that if i scroll out of my showcase it like glitches out and switches very fast to my other navbar before showing my original even though my mouse would be outside of my showcase already.
I managed to get rid of the glitchy behaviour by setting it up differently. Instead of how @femijohn suggested, I simply used a colour variable to show or hide the fill colour of the header component (using the same idea of mouse enter & leave as trigger). This also reduced complexity by making it unnecessary to duplicate the page!
@@eyeruham hey thanks for getting back to me, did this for a ux project a while back and I've not been on figma since 🙃 Good luck with whatever you're doing!
Bro, really thanks for this video. I had been trying on my own some way to do this interaction but I gave up and was looking for a tutorial hoping someone had done it. That was you.
You're Welcome. Glad I could help 🥹
Nailed it. And under seven minutes! Consider me subscribed.
Thank You 🙏🏽
Hey john, your video really helped in my landing page project
Thank you sooooooo much, I wasted a whole hour of work because of this. You saved my day!
You're welcome. Glad it helped! 😊
Thank you so much you are amazing !! I was having a hard time and now it’s fixed my problem
You’re welcome!
OMG I have been looking for this tutorial for so loooong!!!! Thank you!!!!
You're welcome!!😊
You’re a genius 😅😅. This was an amazing tutorial with very clear explanations. Thank you for sharing ❤❤😊
Thank you. I’m glad you found it helpful ❤️
Clear, easy and helpful.. thanks man!
You're welcome
I've been searching for this.. thank you so much
You're welcome!😊
Thank you so much!
P.S waiting eagerly for a new video😂
You won't have to wait long 😁
Thank you! I was looking for just exactly this! And it helped a lot :)
You're welcome!
Great video! Well done Femi 👏
Thank you!! 😊
Amazing work. This is brilliant.
Thank you 🙌🏾
You’re welcome, I really appreciate your kind words 🙏
your video helped me a lot , thank you so much for this useful video ❤
You're welcome 😊
Great video and explanation. Thank you so much 😍
You’re welcome 🙏😊
Thanks a lot❤❤
You’re welcome ❤️
the idea is good, but if you then try to use the navigation menu and you haven't passed the hero section, when the mouse goes over it again, you will reactivate the animation making the original sticky bar state reappear.
Great video and explanation. Thank you!
Thank you so much 🙏
Amazing, I fixed the isse by your video.
Suggestion: we can make a components instead of copy the frame (Home Page)
great video! thank you
You’re welcome 🙏
Thanks a lot
Most welcome
You are a life saver!
you're welcome
Thank you very much for this video!!
Glad it was helpful!
Thank you very much, it helped me a lot.
You're welcome!
thanks bro i was looking for this
Glad I could help
thanks, my hero
You’re welcome
Thank you very much for this wonderful video sir
You’re welcome
Amazing, thank you a lot.
You're welcome.
Great tutorial! I was wondering if there is a way of doing this also for mobile prototypes
Thank you. Sure there is a way to do this on mobile prototype
Thank you. I was stuck. This helped so much and in an instant!!
Glad it helped! You're welcome😊
how to make this in mobile version?
Thank you!
You're welcome
Please i how do you make your prototypes fill your screen on web view?
Thank you for this video, and the many others you've done.
Genius!! Thank you so much :)
You're welcome
This is amazing, definitely learnt something here. Is hero section another name for showcase section 🤔
Thank you. I don’t know why I call it showcase. But for me, it means the same thing in this context. I’m not sure if it’s generally true.
THANKS MAN!
You're welcome.
How do you do this for mobile? I can't seem to make it work because there won't be any mouse cursor for mobile....
very useful
Thank You 🙏🏽
Thanks!
No problem!
This is really helpful but what if i have different pages? i can't make duplicates for each and every one of them.. please help
hi, i kind of have a problem when doing this. if i were to try and put my mouse on my showcase, it stays at the transparent part and if i move my mouse outside of my showcase then it will show my other version of navbar. the problem is that if i scroll out of my showcase it like glitches out and switches very fast to my other navbar before showing my original even though my mouse would be outside of my showcase already.
I ran into the same issue. Have you found a fix for this?
I managed to get rid of the glitchy behaviour by setting it up differently. Instead of how @femijohn suggested, I simply used a colour variable to show or hide the fill colour of the header component (using the same idea of mouse enter & leave as trigger). This also reduced complexity by making it unnecessary to duplicate the page!
@@eyeruham hey thanks for getting back to me, did this for a ux project a while back and I've not been on figma since 🙃 Good luck with whatever you're doing!
I had the same issue, may I ask if you solve this already?
Will someone tell me how to do same thing in mobile app on a scroll
Its a very similar process.
Thank you
Nice
Thanks
Thank you very much. It was a great help!
You're welcome! Glad it was helpful.🙏🏽
tnx
How do you do to see the prototype on the browser?
Copy the prototype link and past in your browser URL. It works best if you're designing wiith your desktop screen size.
Please how do I send my job to a developer after I'm done designing in Figma? I am having this challenge.
You got dev mod now so you just have to allow your dev by accessing your file in the team projecr you created.