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.
Hope figma could just add this now that they have variable features... like switching components with animation if it reaches certain y-axis coordinate.
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.
@@cricmanian yes,figma isn't the apropiate tool to do this function, but to do the idea in the design is cool. but also I was doing a research how to do it and I found that using variables for sure can do it.
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!
There is an easier way to do this. Just use a 0% opacity hitbox frame that triggers a menu overlay while hovering. Two artboards is incredibly inefficient with interaction design. Their smart animate feature is just a stupid workflow. What happens when we need to iterate on design? They need state management like yesterday.
Hey john, your video really helped in my landing page project
Nailed it. And under seven minutes! Consider me subscribed.
Thank You 🙏🏽
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 🥹
Soooo smart, I never knew about the mouse enter, mouse leave
Thank you sooooooo much, I wasted a whole hour of work because of this. You saved my day!
You're welcome. Glad it helped! 😊
Great, This is what I was looking for.
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 ❤️
Amazing, I fixed the isse by your video.
Suggestion: we can make a components instead of copy the frame (Home Page)
Great video! Well done Femi 👏
Thank you!! 😊
Amazing work. This is brilliant.
Thank you 🙌🏾
You’re welcome, I really appreciate your kind words 🙏
Clear, easy and helpful.. thanks man!
You're welcome
Thank you. I was stuck. This helped so much and in an instant!!
Glad it helped! You're welcome😊
I've been searching for this.. thank you so much
You're welcome!😊
Very useful! Helped a lot. Thanks Man!!
You're welcome!
your video helped me a lot , thank you so much for this useful video ❤
You're welcome 😊
Thank you! I was looking for just exactly this! And it helped a lot :)
You're welcome!
Great video and explanation. Thank you!
Thank you so much 🙏
Great video and explanation. Thank you so much 😍
You’re welcome 🙏😊
thank you for always helping me out
Thank you very much. It was a great help!
You're welcome! Glad it was helpful.🙏🏽
Thank you very much for this wonderful video sir
You’re welcome
Thank you very much for this video!!
Glad it was helpful!
Great tutorial
You are a life saver!
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.
Hope figma could just add this now that they have variable features... like switching components with animation if it reaches certain y-axis coordinate.
great video! thank you
You’re welcome 🙏
Amazing, thank you a lot.
You're welcome.
Thank you very much, it helped me a lot.
You're welcome!
thanks bro i was looking for this
Glad I could help
Thank you so much!
P.S waiting eagerly for a new video😂
You won't have to wait long 😁
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.
That's Right, so there's any option to do it propertly?
@@Edfrabeltran i am haveing same issue when the mouse goes to nav bar its change it property
@@cricmanian yes,figma isn't the apropiate tool to do this function, but to do the idea in the design is cool. but also I was doing a research how to do it and I found that using variables for sure
can do it.
Genius!! Thank you so much :)
You're welcome
Thanks for the great video. However, I've encountered an issue with prototyping (open overlay) for items in Navbar. how can I fix it?!
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
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 a lot❤❤
You’re welcome ❤️
Thank you!
You're welcome
Many thanks
You are welcome
THANKS MAN!
You're welcome.
Thanks you so much🥰
great
Big thanks
nice
Thanks a lot
Most welcome
very useful
Thank You 🙏🏽
Thanks!
No problem!
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?
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
it was so helpful, thanks, but i do not know how i can open sub menu in this situation , can anybody helps me? like Services in this video.
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.
Will someone tell me how to do same thing in mobile app on a scroll
Its a very similar process.
Thank you
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.
Nice
Thanks
There is an easier way to do this. Just use a 0% opacity hitbox frame that triggers a menu overlay while hovering. Two artboards is incredibly inefficient with interaction design. Their smart animate feature is just a stupid workflow. What happens when we need to iterate on design? They need state management like yesterday.
Thanks for this. 👍🏼
tnx
worked a treat thank you
Thank you!
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....