Make an Animated Menu like Stripe with React, Tailwind, and AI

#javascript #react #tailwindcss #ai

[creatorsmafia]

I love how you dissect cool web animations! Please make more videos like this. I'd love to see how other effects are achieved.

[Caspitein]

That Figma to code plugin is really dope. Great work!

[vineetsingh]

your teaching style is really amazing.

[MangoMuncher]

Very impressive mate, keen to see more 🙂

[MahmoudGamal-sxbj]

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

[dealloc]

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.

[secretarybailey]

Nice, would like to see you try recreate Stripes gradient effect :)

[borsaniasushant]

Can you share the final code please? Thanks for the tutorial. Going to check out the figma plugin 😊

[olahamdy]

Please make a video how stripe achieved the graphics animations ?

[miksvillamor]

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.

[Gatuxos]

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

[bijeshbalakrishnan]

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?

[Abhishek-fwoo]

nextjs all the animations in the bento section

[JonsTech]

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?

[Iacapuca]

Don't you need to do hovering !== null? Otherwise, the 0 index will be false and shown on screen