Build Beautiful Animated Sidebars with React and Framer Motion

preview_player
Показать описание


Today we're going to learn how we can create beautiful, animate sidebar component with React, TailwindCSS and Framer Motion.

📚 Project Links

🔗 My Links

Timeline:
0:00 - Introduction
0:31 - Layout
10:25 - Animations
  1. Tom Is Loading
  2. tailwindcss
  3. tailwind css full course
  4. web development
  5. javascript animations
  6. awwwards
Рекомендации по теме
Build Beautiful Animated 0:17:16

Build Beautiful Animated Sidebars with React and Framer Motion

Animated Responsive Navbar 0:11:40

Animated Responsive Navbar with CSS - Plus Other Useful Tricks

Can I Create 1:01:37

Can I Create This Tricky Animated CSS Sidebar?

Beautiful Animated Sidebar 0:00:40

Beautiful Animated Sidebar Using Html and CSS with Code

Ultimate Tailwind CSS 0:12:56

Ultimate Tailwind CSS Tutorial // Build a Discord-inspired Animated Navbar

Design an Animated 0:06:05

Design an Animated Sidebar Menu | Figma Tutorial

Subtle, yet Beautiful 0:05:04

Subtle, yet Beautiful Scroll Animations

Beautiful Animated Navigation 0:11:49

Beautiful Animated Navigation Sidebar With HTML and CSS

How to Create 0:07:04

How to Create a Responsive Sidebar Menu with Social Media Buttons Using #HTML and #CSS Only?

Reverse Engineer CSS 0:00:39

Reverse Engineer CSS Animations #Shorts

Building Blurry, Animated 0:09:48

Building Blurry, Animated Background Shapes with Tailwind CSS

Home Dashboard (remaster) 0:27:30

Home Dashboard (remaster) with Side Menu & beautiful animations | Android Studio Tutorial

Elementor Vertical Header 0:15:56

Elementor Vertical Header with Sidebar Navigation Menu in WordPress | Elementor Side Vertical Menu

How to create 0:00:22

How to create shapes in microsoft word?

Beautiful CSS animation 0:00:30

Beautiful CSS animation 😍 #css #html #css3 #html5 #ui #design #ux #uidesign #uxdesign #frontend

Create a Beautiful 0:08:36

Create a Beautiful Animated Accordion Menu with Pure CSS and HTML Only

Beautiful Flip Card 0:00:29

Beautiful Flip Card Animation🔥✨

Make complex an 0:00:16

Make complex an beauty UI with Rive Animation and Flutter Widgets

Advanced Dropdown Menu 0:16:52

Advanced Dropdown Menu - React & CSS Animation Tutorial for Beginners

Easy Tricks for 0:05:40

Easy Tricks for a CLEAN Desktop: Make Windows Look Minimal!

How to Create 0:10:45

How to Create Beautiful Animated Buttons with TailwindCSS

Want a WIDER 0:00:15

Want a WIDER Back? DO THESE! #shorts

A beautiful planet 0:00:15

A beautiful planet style website loading animation using css #shorts #short #animation

Responsive Admin Dashboard 1:28:49

Responsive Admin Dashboard Using HTML CSS & JavaScript with Light & Dark Mode

Комментарии
Автор

more of these. The first video i saw of yours was the dashboard one and it was an immediate sub

raphaeljaggerd
Автор

I have no idea how your channel hasn't popped off already. i just found out about u and it seems like you have been deliviering a banger of content for so long already. hands down one of the best UI channels out there specially with framer motion

rayzer
Автор

Awesome. Thank you, Tom!

A headsup. There's an extension to rename the closing tag automatically without selecting when you're renaming the opening tag. It's called Auto Rename Tag by Juan Han. Just FYI!

adnanamin
Автор

Excellent Tom, I really enjoyed it! If you pay attention to the selected button background while opening and closing the sidebar, you'll notice that the border radius is distorted. You have to set it in the style tag so that Framer Motion can animate it properly. Like this: <motion.div layout style={{ borderRadius: 20 }} />.
I guess the title's border-bottom needs that as well.

djimenezweb
Автор

How would you fix the distortion on the option border radius? Inline style tag instead of a tailwind class?

alexanderhaniotis
Автор

an just yesterday shad CN launched its own customiable side bar :)

harshitpant
Автор

The DVD screensaver completely distracted me during the introduction LOL

its_ot