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

Поділитися
Вставка
  • Опубліковано 29 жов 2023
  • Read more in my full blog post: www.builder.io/blog/stripe-menus
    #javascript #react #tailwindcss #ai

КОМЕНТАРІ • 29

  • @Steve8708
    @Steve8708  8 місяців тому +1

    Read more in my full blog post: www.builder.io/blog/stripe-menus

  • @vineetsingh904
    @vineetsingh904 5 місяців тому

    your teaching style is really amazing.

  • @MangoMuncher1325
    @MangoMuncher1325 8 місяців тому +2

    Very impressive mate, keen to see more 🙂

  • @creatorsmafia
    @creatorsmafia 8 місяців тому +3

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

    • @Steve8708
      @Steve8708  8 місяців тому

      Absolutely, what other site effects should I make a video on?

  • @Caspitein
    @Caspitein 8 місяців тому +2

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

    • @samedaycyborg
      @samedaycyborg 8 місяців тому +1

      Yeah, it's almost like he founded the company which made the plugin!

  • @MahmoudGamal-sx3bj
    @MahmoudGamal-sx3bj Місяць тому

    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
    @dealloc 8 місяців тому

    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.

  • @mounis
    @mounis 8 місяців тому +1

    That was pretty cool.

  • @valistyle7
    @valistyle7 3 місяці тому

    That's great, thank you!

  • @londelidess
    @londelidess 5 місяців тому

    This is what I want! UA-cam gem!!!

  • @malekitani3136
    @malekitani3136 8 місяців тому

    this is awesome

  • @JEsterCW
    @JEsterCW 8 місяців тому +1

    Amazing

  • @secretarybailey770
    @secretarybailey770 7 місяців тому

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

  • @miksvillamor
    @miksvillamor 8 місяців тому

    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.

  • @DioArsya
    @DioArsya 8 місяців тому

    🙌🙌

  • @Abhishek-fw7oo
    @Abhishek-fw7oo 8 місяців тому

    nextjs all the animations in the bento section

  • @olahamdy7020
    @olahamdy7020 6 місяців тому

    Please make a video how stripe achieved the graphics animations ?

  • @borsaniasushant1
    @borsaniasushant1 7 місяців тому

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

  • @samedaycyborg
    @samedaycyborg 8 місяців тому +1

    I need this figma plugin

  • @JonsTech
    @JonsTech 6 місяців тому

    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?

    • @JonsTech
      @JonsTech 6 місяців тому

      I fixed it by adding a hover counter, and only making the transform animations happen if the hover number is above 1

  • @bijeshbalakrishnan9118
    @bijeshbalakrishnan9118 8 місяців тому

    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?

  • @Gatuxos123
    @Gatuxos123 8 місяців тому +2

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

    • @bevik12
      @bevik12 8 місяців тому +2

      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.

    • @PawitSahare
      @PawitSahare 6 місяців тому

      ​​@@bevik12that's also can be do on artificial intelligence. I mean some artificial intelligence like chatgpt can generate all types of logic

  • @Iacapuca
    @Iacapuca Місяць тому

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