Тёмный

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

Steve (Builder.io)
Подписаться 93 тыс.
Просмотров 15 тыс.
50% 1

Read more in my full blog post: www.builder.io/blog/stripe-menus
#javascript #react #tailwindcss #ai

Опубликовано:

 

29 окт 2023

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 29   
@Steve8708
@Steve8708 9 месяцев назад
Read more in my full blog post: www.builder.io/blog/stripe-menus
@MangoMuncher1325
@MangoMuncher1325 9 месяцев назад
Very impressive mate, keen to see more 🙂
@creatorsmafia
@creatorsmafia 9 месяцев назад
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 9 месяцев назад
Absolutely, what other site effects should I make a video on?
@vineetsingh904
@vineetsingh904 6 месяцев назад
your teaching style is really amazing.
@Caspitein
@Caspitein 9 месяцев назад
That Figma to code plugin is really dope. Great work!
@samedaycyborg
@samedaycyborg 9 месяцев назад
Yeah, it's almost like he founded the company which made the plugin!
@MahmoudGamal-sx3bj
@MahmoudGamal-sx3bj 2 месяца назад
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🔥🔥🔥🔥
@mounis
@mounis 9 месяцев назад
That was pretty cool.
@dealloc
@dealloc 9 месяцев назад
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.
@valistyle7
@valistyle7 4 месяца назад
That's great, thank you!
@malekitani3136
@malekitani3136 9 месяцев назад
this is awesome
@JEsterCW
@JEsterCW 9 месяцев назад
Amazing
@londelidess
@londelidess 6 месяцев назад
This is what I want! RU-vid gem!!!
@secretarybailey770
@secretarybailey770 8 месяцев назад
Nice, would like to see you try recreate Stripes gradient effect :)
@miksvillamor
@miksvillamor 9 месяцев назад
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.
@bijeshbalakrishnan9118
@bijeshbalakrishnan9118 9 месяцев назад
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?
@olahamdy7020
@olahamdy7020 7 месяцев назад
Please make a video how stripe achieved the graphics animations ?
@DioArsya
@DioArsya 9 месяцев назад
🙌🙌
@borsaniasushant1
@borsaniasushant1 7 месяцев назад
Can you share the final code please? Thanks for the tutorial. Going to check out the figma plugin 😊
@samedaycyborg
@samedaycyborg 9 месяцев назад
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
@Abhishek-fw7oo
@Abhishek-fw7oo 9 месяцев назад
nextjs all the animations in the bento section
@Gatuxos123
@Gatuxos123 9 месяцев назад
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 9 месяцев назад
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 7 месяцев назад
​​@@bevik12that's also can be do on artificial intelligence. I mean some artificial intelligence like chatgpt can generate all types of logic
@Iacapuca
@Iacapuca 2 месяца назад
Don't you need to do hovering !== null? Otherwise, the 0 index will be false and shown on screen
Далее
10 Tailwind Tricks You NEED To Know!
10:45
Просмотров 282 тыс.
UI Libraries Are Dying, Here's Why
13:28
Просмотров 289 тыс.
How to: Create Figma Landing Pages Using AI
3:25
Просмотров 2,4 тыс.
You Actually CAN Build Animations with TailwindCSS
8:30
Tailwind CSS Plugins I Wish I knew Sooner
14:38
Просмотров 5 тыс.
How To Build AI Products That Don't Flop
8:03
Просмотров 11 тыс.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 933 тыс.