I am really happy i stumbled on this video. Great content & amazing plugin. Please make more awesome videos like this and i will be checking them all🔥🔥🔥🔥
I used Stripe as a inspiration for the markup, but achieved the transitions using ARIA/data attributes to hold state, buttons for keyboard accessibility and CSS for most of the animation/transition-even with directional animation. I used JS for managing state transitions.
hey steve, this is amazing, and thank you for building this tool. One question, does the figma design need to be designed in a certain way to make sure it will be converted into a code semantically? Thank you in advance.
When I open your figma file in figma, most of the menus including the plugins menu, is not visible. So cannot convert your figma file into code. Is this something that you indented to do?
Thanks for the tutorial! I have most of it working, the only thing I can't figure out is when you initially hover over a link, the menu flies in from the far left of the screen / wherever the last hovered link (left position) was. So if you move your mouse off the nav bar from link 1, move it back into the nav bar over link 5 the animation will shoot across instead of appearing under 5. We should only want the smooth transitions to happen if you are moving within the navbar, not when you come out and back in on another link. Does that make sense, anyone else having this issue?
As I am studying frontend development, this is completely discouraging to continue, in a way that knowing how to use html css JavaScript and react to create stuff, an AI is automatically doing my job, so I will not have a job, or replaced very soon...
You are going to get paid for your brain. So basically building business logic. That will be far more valuable than just doing HTML and CSS. And if you are going down to the freelancer road then it's a great tool to help you. And anyway you still need to know what to change when needed so you need to know the technologies.
@@viktorberczeli3009that's also can be do on artificial intelligence. I mean some artificial intelligence like chatgpt can generate all types of logic
Read more in my full blog post: www.builder.io/blog/stripe-menus
I am really happy i stumbled on this video. Great content & amazing plugin. Please make more awesome videos like this and i will be checking them all🔥🔥🔥🔥
I love how you dissect cool web animations! Please make more videos like this. I'd love to see how other effects are achieved.
Absolutely, what other site effects should I make a video on?
your teaching style is really amazing.
Very impressive mate, keen to see more 🙂
That Figma to code plugin is really dope. Great work!
Yeah, it's almost like he founded the company which made the plugin!
I used Stripe as a inspiration for the markup, but achieved the transitions using ARIA/data attributes to hold state, buttons for keyboard accessibility and CSS for most of the animation/transition-even with directional animation. I used JS for managing state transitions.
That was pretty cool.
That's great, thank you!
hey steve, this is amazing, and thank you for building this tool. One question, does the figma design need to be designed in a certain way to make sure it will be converted into a code semantically? Thank you in advance.
Nice, would like to see you try recreate Stripes gradient effect :)
This is what I want! RUclips gem!!!
this is awesome
Amazing
Please make a video how stripe achieved the graphics animations ?
Can you share the final code please? Thanks for the tutorial. Going to check out the figma plugin 😊
When I open your figma file in figma, most of the menus including the plugins menu, is not visible. So cannot convert your figma file into code. Is this something that you indented to do?
nextjs all the animations in the bento section
Thanks for the tutorial!
I have most of it working, the only thing I can't figure out is when you initially hover over a link, the menu flies in from the far left of the screen / wherever the last hovered link (left position) was. So if you move your mouse off the nav bar from link 1, move it back into the nav bar over link 5 the animation will shoot across instead of appearing under 5. We should only want the smooth transitions to happen if you are moving within the navbar, not when you come out and back in on another link. Does that make sense, anyone else having this issue?
I fixed it by adding a hover counter, and only making the transform animations happen if the hover number is above 1
I need this figma plugin
🙌🙌
As I am studying frontend development, this is completely discouraging to continue, in a way that knowing how to use html css JavaScript and react to create stuff, an AI is automatically doing my job, so I will not have a job, or replaced very soon...
You are going to get paid for your brain. So basically building business logic. That will be far more valuable than just doing HTML and CSS. And if you are going down to the freelancer road then it's a great tool to help you. And anyway you still need to know what to change when needed so you need to know the technologies.
@@viktorberczeli3009that's also can be do on artificial intelligence. I mean some artificial intelligence like chatgpt can generate all types of logic
Don't you need to do hovering !== null? Otherwise, the 0 index will be false and shown on screen