I Did Origami with React and TailwindCSS

Подписаться 19 тыс.

Просмотров 3 тыс.

50% 1

Animated UI components for React, Tailwind CSS, Framer Motion & More ✨ www.hover.dev
Googling "how to center a div"? I've done it more times that I'd care to admit.
But that's not what we're talking about today. TODAY we're learning to FOLD html elements using a couple of sneaky CSS and JavaScript tricks.
📚 Project Links
Source code: www.hover.dev/components/other
Calendar component: www.hover.dev/components/cale...
Clip path tool: bennettfeely.com/clippy/
🔗 My Links
TikTok: / tomisloading
Instagram: / tomisloading
GitHub: github.com/TomIsLoading
Twitter: / tomisloading
Discord & more: linktr.ee/tomisloading
Portfolio templates: tomisloading.gumroad.com/
Website: www.hover.dev
Timeline:
0:00 - Introduction
0:07 - How it's going to work
1:11 - Code walkthrough
4:34 - Another example

Наука

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

21 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 19

@anuvette Месяц назад

that explanation was actually really intuitive

@Aman12q 25 дней назад

Your work and library are top-notch, and I'm constantly impressed. Keep setting the bar high!🎉🎉

@tomisloading 25 дней назад

Thank you so much!! :)

@Codwave-12 Месяц назад

Great work mate!

@r-i-ch Месяц назад

I thought about doing an effect like this for a analog flip-clock. This is a great example of that effect so thank you! At the same time, using React, Tailwind, and Framer Motion along with custom CSS for the effect seems like a sh*tload of tech and code. I wonder if most of the actual effect could be done in CSS? Like maybe with the dark voodoo of matrix transforms?

@isis8719 Месяц назад

thanks!

@codedeath9698 Месяц назад

Hey, amazing work and the component library you bilt is really good. I was checking the Calendar component found a bit animation issue with it if you select a date and quickly select another date bottom part gets blank for some time, It looks like its waiting for the previous animation to finish.

@tomisloading Месяц назад

Ah, I’ll take a look!

@codedeath9698 Месяц назад

@@tomisloading BTW, do you work on these components and videos alone or you have a team, cuz I would love to contribute and learn. I have a decent experience building full stack applications using MERN and I want to learn more about animations and contribute towards a good project

@tomisloading Месяц назад

As of right now it’s just me. I’ve had some people ask to contribute, but given it’s a paid product I’d need to find the right way to compensate people who want to contribute (unfortunately not really in the budget just yet haha!)

@codedeath9698 Месяц назад

@@tomisloading ohh, too bad. Please whenever you like to hire and consider remote work as well just release a video 😁.

@Solo_playz Месяц назад

Including me as well, BTW I read the above conversation 😅 Consider me whenever you want to hire for the same I also want to learn these types of animations by contributing to these awesome components that love to be part of your team!

@frenox4118 15 дней назад

not completely related but is framer motion impacts performance a lot? thinking of adding this but probably not adding a lot of animation for the site