- 46
- 192 122
Built With Code
United States
เข้าร่วมเมื่อ 23 ม.ค. 2021
Advanced frontend web development tutorials.
Welcome to Built With Code! You'll find tutorials to create and build your next web project, leveraging frameworks like Framer Motion, Next.js, and Tailwind.
Welcome to Built With Code! You'll find tutorials to create and build your next web project, leveraging frameworks like Framer Motion, Next.js, and Tailwind.
Recreate Apple Mail categories using Framer Motion
In this video, I'll show you how to recreate the new category selection UI from Apple Mail.
💾 Starter code: github.com/Built-With-Code/apple-mail-category-animation/tree/starter
⏭️ Watch This Next: th-cam.com/video/4HZaeIFsSBY/w-d-xo.html
📱 Follow online: built_with_code
Have a question about anything in this video? Drop it in the comments!
⏰ Timecodes ⏰
0:00 - Intro + Preview
0:06 - Starter code
0:15 - Category UI
6:07 - Adding layout animations
7:34 - Animating the email list
8:45 - Outro
-------------------------------
Welcome to Built With Code, a channel focused on intermediate/advanced frontend web development topics. Some of my favorite tools are Next.js, TailwindCSS, and Framer Motion. If you find value from the videos, a like and/or subscribe is much appreciated!
💾 Starter code: github.com/Built-With-Code/apple-mail-category-animation/tree/starter
⏭️ Watch This Next: th-cam.com/video/4HZaeIFsSBY/w-d-xo.html
📱 Follow online: built_with_code
Have a question about anything in this video? Drop it in the comments!
⏰ Timecodes ⏰
0:00 - Intro + Preview
0:06 - Starter code
0:15 - Category UI
6:07 - Adding layout animations
7:34 - Animating the email list
8:45 - Outro
-------------------------------
Welcome to Built With Code, a channel focused on intermediate/advanced frontend web development topics. Some of my favorite tools are Next.js, TailwindCSS, and Framer Motion. If you find value from the videos, a like and/or subscribe is much appreciated!
มุมมอง: 295
วีดีโอ
Avoid these mistakes on your responsive website
มุมมอง 85021 วันที่ผ่านมา
In this video, we'll discuss how to fix 3 common mistakes on mobile websites. 💾 Source code: github.com/Built-With-Code/mobile-website-fixes ⏭️ Watch This Next: th-cam.com/video/Plw9ycRd5Wc/w-d-xo.html 📱 Follow online: built_with_code Have a question about anything in this video? Drop it in the comments! ⏰ Timecodes ⏰ 0:00 - Intro 0:15 - Mistake 1 - Safe Area Color 0:57 - Mistake 2 ...
Add drag and drop with Framer Motion in 5 minutes
มุมมอง 780หลายเดือนก่อน
In this video, we will add drag and drop controls to a list of items using Framer Motion. 💾 Starter code: github.com/Built-With-Code/drag-and-drop-framer-motion/tree/starter ⏭️ Watch This Next: th-cam.com/video/TeeWsBZg8og/w-d-xo.html 📱 Follow online: built_with_code Have a question about anything in this video? Drop it in the comments! ⏰ Timecodes ⏰ 0:00 - Intro Preview 0:07 - Star...
Create a Responsive and Animated Navbar with Framer Motion
มุมมอง 1.4Kหลายเดือนก่อน
In this video, we will create a responsive navbar that collapses to a hambuger menu with enter and exit animations. 💾 Starter code: github.com/Built-With-Code/animated-responsive-navbar/tree/starter ⏭️ Watch This Next: th-cam.com/video/cLu6AwrQaNY/w-d-xo.html& 📱 Follow online: built_with_code Have a question about anything in this video? Drop it in the comments! ⏰ Timecodes ⏰ 0:00 -...
Horizontal smooth scroll with Lenis
มุมมอง 4542 หลายเดือนก่อน
In this video, we'll create a horizontal image gallery with smooth scroll using Lenis and Framer Motion. 💾 Starter code: github.com/Built-With-Code/horizontal-smooth-image-gallery/tree/starter ⏭️ Watch This Next: th-cam.com/video/fpyNjX-dVBs/w-d-xo.html 📱 Follow online: built_with_code Have a question about anything in this video? Drop it in the comments! ⏰ Timecodes ⏰ 0:00 - Intro ...
CSS Border Animations with Framer Motion in 7 Minutes
มุมมอง 9552 หลายเดือนก่อน
In this video, we will create two animated gradient borders using CSS and Framer Motion. 💾 Starter code: github.com/Built-With-Code/animated-border-gradient/tree/starter ⏭️ Watch This Next: th-cam.com/video/4HZaeIFsSBY/w-d-xo.html 📱 Follow online: built_with_code Have a question about anything in this video? Drop it in the comments! ⏰ Timecodes ⏰ 0:00 - Intro Preview 0:12 - Starter ...
Scrolling Table of Contents with Framer Motion
มุมมอง 1.5K3 หลายเดือนก่อน
In this video, we'll create an animated table of contents sidebar for a blog article. 💾 Starter code: github.com/Built-With-Code/animated-article-toc/tree/starter ⏭️ Watch This Next: th-cam.com/video/XipofYyw7jg/w-d-xo.html 📱 Follow online: built_with_code Have a question about anything in this video? Drop it in the comments! ⏰ Timecodes ⏰ 0:00 - Intro Preview 0:15 - Starter code 0:...
Lenis smooth scroll in under 4 minutes
มุมมอง 4.6K3 หลายเดือนก่อน
In this video, we are going to speedrun adding Lenis smooth scroll to an existing Next.js project. 💾 Starter code: github.com/Built-With-Code/lenis-smooth-scroll/tree/starter ⏭️ Watch This Next: th-cam.com/video/CvBuqEfw0mU/w-d-xo.html 📱 Follow online: built_with_code Learn more about Lenis: lenis.darkroom.engineering/ Have a question about anything in this video? Drop it in the com...
Floating Card Animations with CSS and Framer Motion
มุมมอง 1K4 หลายเดือนก่อน
In this video, we're creating a floating 3D card with rotation animations and a light sheen effect, inspired by the profile card in Arc. 💾 Starter code: github.com/Built-With-Code/3d-member-card/tree/starter ⏭️ Watch This Next: th-cam.com/video/nPsJfTVjkdo/w-d-xo.html 📱 Follow online: built_with_code Have a question about anything in this video? Drop it in the comments! ⏰ Timecodes ...
Animated Number Counter with Framer Motion
มุมมอง 1.3K4 หลายเดือนก่อน
In this video, we are going to create an animated counter for TH-cam subscribers using Framer Motion. 💾 Starter code: github.com/Built-With-Code/animated-yt-sub-count/tree/starter ⏭️ Watch This Next: th-cam.com/video/4HZaeIFsSBY/w-d-xo.html Credit to @leerob for the channel card component. 📱 Follow online: built_with_code Have a question about anything in this video? Drop it in the ...
Recreate the Figma toolbar with Framer Motion
มุมมอง 4834 หลายเดือนก่อน
In this video, we are going to recreate the new Figma toolbar animation using Framer Motion layout animations. 💾 Starter code: github.com/Built-With-Code/figma-toolbar/tree/starter ⏭️ Watch This Next: th-cam.com/video/4HZaeIFsSBY/w-d-xo.html 📱 Follow online: built_with_code Have a question about anything in this video? Drop it in the comments! ⏰ Timecodes ⏰ 0:00 - Intro Preview 0:20...
Apple’s favorite text scroll animation
มุมมอง 1.4K5 หลายเดือนก่อน
In this video, we are going to recreate an animation Apple uses in a few places on its website, involving text scrolling over background videos. 💾 Starter code: github.com/Built-With-Code/apple-favorite-scroll-animation/tree/starter ⏭️ Watch This Next: th-cam.com/video/4HZaeIFsSBY/w-d-xo.html 📱 Follow online: built_with_code Have a question about anything in this video? Drop it in t...
Glass material with TailwindCSS in under 3 minutes
มุมมอง 1.5K5 หลายเดือนก่อน
In this video, we are going to create a glass material navbar with TailwindCSS. 💾 Starter code: github.com/Built-With-Code/glass-material-navbar/tree/starter ⏭️ Watch This Next: th-cam.com/video/NxIBnvb8B7Y/w-d-xo.html 📱 Follow online: built_with_code Have a question about anything in this video? Drop it in the comments! ⏰ Timecodes ⏰ 0:00 - Intro Preview 0:07 - Starter code 0:20 - ...
Apple-style product cards with Framer Motion
มุมมอง 1.8K6 หลายเดือนก่อน
In this video, we are going to recreate the animated feature cards from Apple's WWDC websites. 💾 Starter code: github.com/Built-With-Code/apple-info-cards/tree/starter ⏭️ Watch This Next: th-cam.com/video/QBnXaaadp50/w-d-xo.html 📱 Follow online: built_with_code Have a question about anything in this video? Drop it in the comments! ⏰ Timecodes ⏰ 0:00 - Intro Preview 0:19 - Starter co...
Blur + Zoom Card Parallax with Framer Motion
มุมมอง 2.1K6 หลายเดือนก่อน
In this video, we will create a card parallax effect with blur and zoom animations using Framer Motion. 💾 Starter code: github.com/Built-With-Code/animated-scroll-zoom-cards/tree/starter ⏭️ Watch This Next: th-cam.com/video/90vYPTMB4UY/w-d-xo.html 📱 Follow online: built_with_code Have a question about anything in this video? Drop it in the comments! ⏰ Timecodes ⏰ 0:00 - Intro Previe...
Animated bottom tray with Framer Motion layout animations
มุมมอง 2.3K7 หลายเดือนก่อน
Animated bottom tray with Framer Motion layout animations
Block editor in Next.js using BlockNote and UploadThing
มุมมอง 6K7 หลายเดือนก่อน
Block editor in Next.js using BlockNote and UploadThing
Animated custom scrollbar with Framer Motion Layout Animations
มุมมอง 2.3K8 หลายเดือนก่อน
Animated custom scrollbar with Framer Motion Layout Animations
Signup form validation using Shadcn + Zod
มุมมอง 2.3K8 หลายเดือนก่อน
Signup form validation using Shadcn Zod
Landing page with full-page navigation menu using Next.js and Framer Motion
มุมมอง 2K9 หลายเดือนก่อน
Landing page with full-page navigation menu using Next.js and Framer Motion
Add keyboard superpowers to your Next.js project
มุมมอง 6869 หลายเดือนก่อน
Add keyboard superpowers to your Next.js project
Custom themes with TailwindCSS in under 9 minutes
มุมมอง 10K10 หลายเดือนก่อน
Custom themes with TailwindCSS in under 9 minutes
Infinite scrolling carousel with hover effects using Framer Motion
มุมมอง 22K10 หลายเดือนก่อน
Infinite scrolling carousel with hover effects using Framer Motion
Landing page with Parallax & Smooth Scroll using Lenis and Framer Motion
มุมมอง 7K10 หลายเดือนก่อน
Landing page with Parallax & Smooth Scroll using Lenis and Framer Motion
Apple-style benchmark graphs using Framer Motion
มุมมอง 1.5K11 หลายเดือนก่อน
Apple-style benchmark graphs using Framer Motion
Next/Image Placeholder Blur: Elevate your website's loading experience
มุมมอง 2.6K11 หลายเดือนก่อน
Next/Image Placeholder Blur: Elevate your website's loading experience
Smooth scrolling from scratch with Framer Motion
มุมมอง 5Kปีที่แล้ว
Smooth scrolling from scratch with Framer Motion
Dark mode with TailwindCSS in under 7 minutes
มุมมอง 44Kปีที่แล้ว
Dark mode with TailwindCSS in under 7 minutes
Turbocharge your images: A Guide to Next/Image Optimization
มุมมอง 918ปีที่แล้ว
Turbocharge your images: A Guide to Next/Image Optimization
How to do it with native wind in expo react native?
❤
Thanks a lot for this. Any chance to have components separately set up in future videos? I'm having trouble how to pass all the states and props between pages and components. Thanks for considering and Merry Christmas!
Thanks for the feedback, I'll take into account. Happy holidays!
@@builtwithcode Happy holidays and thanks again!
Dude.. that data-slot is fireeeeee. Thank you for that! 🫡
Perfect - thank you.
I love your videos, always an interesting subject. Would love to see you on GSAP one day ahaha
Thanks for the support! I played around with GSAP a few years ago, but then got hooked on Framer Motion and never looked back :)
Subbed ya! 🎉
Thanks buddy!!
Thanks bro.
This is one of my favourite channels
It is becoming one for me
Very straight to the point thankyou for the great content
THANK YOU
Hello, can you make a video about creating custom scrollbar with framer motion and no webkitcss? Because I don't see anyone on framer motion community doing that thing. I'm glad if you make a tutorial for us
Check out my previous video on creating an animated custom scrollbar, which seems to match your description
Definitely is all that i need to know, thanks bro!
wow, i learnt so many new things in such a short time, thank you ❤
Glad to hear it!
Steps: 1. Define color variables in global.css 2. Include above variables in tailwind.config.js 3. Use variables in classNames in components for styling colors 4. Use states for adding and removing color variables classes in main or html or body components dynamically
Might be an insane question, but how'd you get that left iPhone preview? Super cool.
Chrome browser extension i believe Write mobile simulator or something
It’s the iPhone simulator that comes with Xcode
@@builtwithcode Good looks!
Niceeeee! I want More of these 😀
The 100dvh is key. Just learnt that
Great stuff, just a side note, its not correct to place a div inside of a button, you will get an error in the console 😃
시작코드말고 풀코드는 없나여?,,ㅡ
The completed code is in the `main` branch in the linked GitHub repository
great video
nice and well explained video ❤.
Best tutorial i saw been 4 times watching same tutorial still doenst understand,, but this amazing thanks man
Great tutorial, helped me alot thank you very much hope you find success on youtube you deserve it !
Thanks a lot man, ive been doing it wrong for the past hour, i really appreciate ✌✌
thanks
simple! this helps!
so there is no need to use useEffect and path controls Try this code, remove useEffect, and path controls. Works fine <motion.path variants={path1Variants} initial="closed" animate={menuOpen ? "open" : "closed"} transition={{ duration: 0.2 }} /> <motion.path variants={path2Variants} initial="closed" animate={menuOpen ? "open" : "closed"} transition={{ duration: 0.2 }} />
i created this button in navbar , now i am using this navbar in every component but the color is changing only in navbar not everywhere, how to solve this?
thanks mate, was searching for it
Thanks !
Great video! Btw. when you use useState and setMenuOpen to the opposite value of the current value, it is much better practice to write setMenuOpen(current => !current) for reactivity and performance reasons :-D
Neat! 😎😎
Simple and very well explained video.
Simply super !! And superbly simple - that is the way you demonstrated and described - clear, precise, to-the-point, and no extra noise !! THANK YOU SO VERY MUCH !!
Glad you found it helpful!
How to save these in a database with all the styles, is there a specific method to follow since content is passed to backend as array object How should I save that kind of data in a column in a database.
You can serialize the content using `JSON.stringify(editor.document)`, then take that string and store in your backend. The BlockNote docs have some more details you can checkout.
Thanks a lot ✅✅👍👍
Please keep making these, they are so helpful and you are a great teacher!
Glad you're finding them useful!
Smooth scrolling has too much delay while scrolling with mouse. Anyone experiencing?
yeah do you find the solution
@@maihoonayush Not yet. :(
mouse scroll not working. any idea?
the problem with this is when you set to darkmode then you refresh the page then it will back to light
One way around this is to store the active theme in local storage. Then every time you load the page read from there to initialize the theme.
Very nice video! Keep creating more video like this!
when it gets in the end of the second array, it its with a black spot, how can i fix it?
blank**
Pfoee I'm hooked to learn more and become good at this
Helpful!
Straight to the point. Thanks
very annoying breaking voice
Thanks 🙌
Amazing