Тёмный

Create the PERFECT Button (TailwindCSS / Framer Motion) 

rithmic
Подписаться 16 тыс.
Просмотров 36 тыс.
50% 1

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

 

27 сен 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 85   
@RobertinhoCraft
@RobertinhoCraft 5 месяцев назад
summarizing why i don't like front-end. Great vid
@shanehoban
@shanehoban 5 месяцев назад
Absolutely disgustingly good content on your channel
@iamrithmic
@iamrithmic 5 месяцев назад
Haha thank you :)
@Samkhan7t3
@Samkhan7t3 5 месяцев назад
What an up down of emotion 😂
@dhruvalraval8078
@dhruvalraval8078 5 месяцев назад
Man your framer motion tutorials are so good, better than their docs lmao. Please create extensive tutorials around Framer motion
@iamrithmic
@iamrithmic 5 месяцев назад
Thank you! Yes will be doing more in the future
@王呢-z1f
@王呢-z1f 5 месяцев назад
Even though I knew these source code, I still don't understand how it work.But the explanation provided in this video is exactly what I need.Thank, homie.
@iamrithmic
@iamrithmic 5 месяцев назад
Glad it helped!
@alterWarOfficial
@alterWarOfficial 5 месяцев назад
I was impressed at the xor / exclude mask thingy
@iamrithmic
@iamrithmic 5 месяцев назад
Thank you. Was hoping that it translated well
@auraSinhue
@auraSinhue 5 месяцев назад
This is the first video I watched from your channel, it is amazing! ❤
@iamrithmic
@iamrithmic 5 месяцев назад
Glad you enjoy it!
@jannisstefanis9671
@jannisstefanis9671 5 месяцев назад
yea man thats exactly the content i love from you
@iamrithmic
@iamrithmic 5 месяцев назад
Words mean a lot. More to come :)
@loganconnors
@loganconnors 5 месяцев назад
im a backend engineer and.. that felt so good.. nice content!!
@iamrithmic
@iamrithmic 5 месяцев назад
Thank you!
@r-i-ch
@r-i-ch 5 месяцев назад
Content-wise, this is excellent. . Technology-wise: Not trying to be a hater, but I think the same interaction could maybe be done with pure css, and an svg mask.
@shadowlegend9751
@shadowlegend9751 5 месяцев назад
I just subscribed to you and turned on my notifications because of this! we need more of these.
@iamrithmic
@iamrithmic 5 месяцев назад
Thank you! More to come
@deliriumcode
@deliriumcode 4 месяца назад
One more here!
@salehinafnan
@salehinafnan 5 месяцев назад
Top tier content. PLEASE CARRY ON👌🏻💯💯
@iamrithmic
@iamrithmic 5 месяцев назад
Thank you! More to come
@kcin4206
@kcin4206 5 месяцев назад
How to do modern frontend dev without going mad. Great video.
@iamrithmic
@iamrithmic 5 месяцев назад
Thank you!
@sinhasuvam
@sinhasuvam 5 месяцев назад
1st time watcher. Thanks for the awesome explanation.
@iamrithmic
@iamrithmic 4 месяца назад
Glad you liked it!
@HydroRx
@HydroRx 5 месяцев назад
AMAZING!! Thank you so much for explaining each and every detail provided in such an easy way to understand
@iamrithmic
@iamrithmic 5 месяцев назад
You're very welcome!
@IkraamDev
@IkraamDev 5 месяцев назад
That was a good dose of imposter syndrome lol, great work!
@iamrithmic
@iamrithmic 5 месяцев назад
Thank you! Keep in mind editing can make the code look like it's "just that simple"
@ecodersofficial
@ecodersofficial 5 месяцев назад
Amazing, you gained a new subscriber!
@iamrithmic
@iamrithmic 5 месяцев назад
Awesome, thank you!
@ecodersofficial
@ecodersofficial 5 месяцев назад
@@iamrithmic Can you make such similiar tutorials for interactive cards? I also learned the framer motion's whileHover and whileTap properties from you, so I implemented this also to my projects cards and its scaling animation looks great, but I think scaling of everything is boring. Maybe more such ideas?
@felixranesberger3846
@felixranesberger3846 5 месяцев назад
Great video!
@amg4160
@amg4160 5 месяцев назад
this shit is amazing ty for this
@iamrithmic
@iamrithmic 5 месяцев назад
You are more than welcome
@ShahryarAsif
@ShahryarAsif Месяц назад
Can we do animated shinny border? which only moves around the button or the card ?
@hamid-aliweb
@hamid-aliweb 5 месяцев назад
Amazing 🎉. Please make tutorial on "glowing svg path moving lines" , I see this effect on many sites but don't know how to make it
@iamrithmic
@iamrithmic 5 месяцев назад
Yeah would like to do some more SVG related content
@jsaugat_
@jsaugat_ 5 месяцев назад
Subscribed !! Thank you so much
@iamrithmic
@iamrithmic 5 месяцев назад
Means a lot :)
@vedant588
@vedant588 5 месяцев назад
high value content right there.
@iamrithmic
@iamrithmic 5 месяцев назад
Your comment means a lot :)
@vedant588
@vedant588 5 месяцев назад
@@iamrithmic please teach such intermediate and advance css stuff on youtube.
@jkloopd1029
@jkloopd1029 5 месяцев назад
cool!
@jirkaB_
@jirkaB_ 3 месяца назад
Hello, amazing tutorial, but i have an issue: when i made change to any of props in motion component it wont rerender in browser any solutions?
@nathnaelwondisha6649
@nathnaelwondisha6649 5 месяцев назад
you earned a sub
@iamrithmic
@iamrithmic 5 месяцев назад
That means a lot :)
@_jacuzii_
@_jacuzii_ 5 месяцев назад
great video
@iamrithmic
@iamrithmic 5 месяцев назад
Glad you enjoyed it
@adenanshaleh6547
@adenanshaleh6547 5 месяцев назад
can someone explain how he set up the --x variable?
@raymondmichael4987
@raymondmichael4987 4 месяца назад
I'm wondering too, because TS is yelling at me now; bad thing, I don't even know where I can satisfy it 😥. I can't even compile my application
@raymondmichael4987
@raymondmichael4987 4 месяца назад
Oooh, managed to solve it. Now the application builds successful 😊
@raymondmichael4987
@raymondmichael4987 4 месяца назад
define types file .d.ts at the root of your directory and put the following lines in it: import 'react'; declare module 'react' { interface CSSProperties { '--x'?: string; } }
@karimartikainen1
@karimartikainen1 2 месяца назад
@@raymondmichael4987 Thank you!
@rawallon
@rawallon 4 месяца назад
Bro why yours ; keep changing position when transitioning to different code?
@bilalillahi6347
@bilalillahi6347 5 месяцев назад
As soon as i reached 2 minutes, i subscribed you. You have talent of Conveying So Beautifully.
@iamrithmic
@iamrithmic 5 месяцев назад
This means a lot! Thank you
@b4rt1j1
@b4rt1j1 5 месяцев назад
Is it possible to implement this without react?
@iamrithmic
@iamrithmic 5 месяцев назад
Yes
@chudchadanstud
@chudchadanstud 5 месяцев назад
Him: I'm gonna make a button! Some poor guy's CPU/Mobile: Oh god! Please don't. Some poor guy with slow internet: Oh god! Please don't.
@wlockuz4467
@wlockuz4467 5 месяцев назад
What do you use to edit the code?
@iamrithmic
@iamrithmic 5 месяцев назад
Snappify + Premiere Pro + A lot of sweat
@wlockuz4467
@wlockuz4467 5 месяцев назад
@@iamrithmic Thanks man! Those code transitions look smooth af, wish you a lot of success!
@iamrithmic
@iamrithmic 5 месяцев назад
Your words mean a lot. Yeah the software works out really well.
@IsebellaStone
@IsebellaStone 5 месяцев назад
Can you make this design in framer? Without any code?
@iamrithmic
@iamrithmic 5 месяцев назад
I haven't tried it
@Torbikini
@Torbikini 5 месяцев назад
I haven’t heard of that animation tool, I’m assuming this can’t be accomplished with CSS animations then? Thank you for the great video btw!
@iamrithmic
@iamrithmic 5 месяцев назад
Framer Motion simplifies it, provides more control over the animation style. Really appreciate the comment :)
@CristianKirk
@CristianKirk 5 месяцев назад
This can be done with just CSS. It's weird to see it being almost forced to be with these bloated libraries.
@iamrithmic
@iamrithmic 5 месяцев назад
by all means
@user-pw5do6tu7i
@user-pw5do6tu7i 5 месяцев назад
today I understand the hype behind tailwind lol
@coomservative
@coomservative 5 месяцев назад
this is an example of how it becomes a big mess, you could replace all this with 2 css selectors
@Helixr
@Helixr 5 месяцев назад
This is amazing.I am a frontend developer but when I see stuff like that, the imposter syndrome kicks in. Congratulations on re-creating this animation and I would love to see the card flip animation as well using framer motion.
@iamrithmic
@iamrithmic 5 месяцев назад
Much appreciated. Videos can always make code look like a piece of cake, but it's always a lot of head banging and in this case support from Verse.
@ChuZaco
@ChuZaco 5 месяцев назад
DON’T SEE NO T
@iamrithmic
@iamrithmic 5 месяцев назад
Ain't no way bro 😂 Comment caught me off guard
@ChuZaco
@ChuZaco 5 месяцев назад
😂😂😂😂
@treyrader
@treyrader 5 месяцев назад
Dang you should level up your tailwindcss skills! tailwind is like the greatest thing to ever happen for implementing frontend shinanigans
@coomservative
@coomservative 5 месяцев назад
oh god, react/tailwind has now fully replaced jQuery, including using it for things that don’t need it.
@amogelangmoatswi1918
@amogelangmoatswi1918 5 месяцев назад
Work of art content, thank you
@iamrithmic
@iamrithmic 5 месяцев назад
This means a lot. Thank you!
Далее
Framer Motion (React) - The Basics
17:07
Просмотров 31 тыс.
How the PROS Use Tailwind
9:55
Просмотров 50 тыс.
I WISH I Knew These Tailwind Tips Earlier
9:15
Просмотров 188 тыс.
The Easy Way to Design Top Tier Websites
11:54
Просмотров 435 тыс.
An introduction to Shader Art Coding
22:40
Просмотров 980 тыс.
A flexbox trick to improve text wrapping
5:02
Просмотров 216 тыс.
Crazy CSS Using By Master CSS
6:46
Просмотров 156 тыс.