Built With Code
Built With Code
  • 46
  • 192 122
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!
มุมมอง: 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
Animated gradient text with TailwindCSS
มุมมอง 7Kปีที่แล้ว
Animated gradient text with TailwindCSS
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

ความคิดเห็น

  • @张鹏辉-e3z
    @张鹏辉-e3z 12 ชั่วโมงที่ผ่านมา

    How to do it with native wind in expo react native?

  • @lawalmuktair5617
    @lawalmuktair5617 วันที่ผ่านมา

  •  4 วันที่ผ่านมา

    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!

    • @builtwithcode
      @builtwithcode 2 วันที่ผ่านมา

      Thanks for the feedback, I'll take into account. Happy holidays!

    •  9 ชั่วโมงที่ผ่านมา

      @@builtwithcode Happy holidays and thanks again!

  • @gadoosher
    @gadoosher 6 วันที่ผ่านมา

    Dude.. that data-slot is fireeeeee. Thank you for that! 🫡

  • @AndrewDBrown2020
    @AndrewDBrown2020 8 วันที่ผ่านมา

    Perfect - thank you.

  • @yanngatignol9126
    @yanngatignol9126 10 วันที่ผ่านมา

    I love your videos, always an interesting subject. Would love to see you on GSAP one day ahaha

    • @builtwithcode
      @builtwithcode 10 วันที่ผ่านมา

      Thanks for the support! I played around with GSAP a few years ago, but then got hooked on Framer Motion and never looked back :)

  • @mutantmantish6141
    @mutantmantish6141 10 วันที่ผ่านมา

    Subbed ya! 🎉

  • @Ajay-cb2tc
    @Ajay-cb2tc 10 วันที่ผ่านมา

    Thanks buddy!!

  • @Ajay-cb2tc
    @Ajay-cb2tc 10 วันที่ผ่านมา

    Thanks bro.

  • @arielelias_mza
    @arielelias_mza 10 วันที่ผ่านมา

    This is one of my favourite channels

  • @AnthonyChablov
    @AnthonyChablov 10 วันที่ผ่านมา

    Very straight to the point thankyou for the great content

  • @moistmangomilkshake347
    @moistmangomilkshake347 13 วันที่ผ่านมา

    THANK YOU

  • @nightmusic2210
    @nightmusic2210 14 วันที่ผ่านมา

    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

    • @builtwithcode
      @builtwithcode 14 วันที่ผ่านมา

      Check out my previous video on creating an animated custom scrollbar, which seems to match your description

  • @Mitdevcat
    @Mitdevcat 15 วันที่ผ่านมา

    Definitely is all that i need to know, thanks bro!

  • @yashh7449
    @yashh7449 22 วันที่ผ่านมา

    wow, i learnt so many new things in such a short time, thank you ❤

    • @builtwithcode
      @builtwithcode 22 วันที่ผ่านมา

      Glad to hear it!

  • @overunityinventor
    @overunityinventor 22 วันที่ผ่านมา

    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

  • @gadoosher
    @gadoosher 24 วันที่ผ่านมา

    Might be an insane question, but how'd you get that left iPhone preview? Super cool.

    • @Usmankith
      @Usmankith 23 วันที่ผ่านมา

      Chrome browser extension i believe Write mobile simulator or something

    • @builtwithcode
      @builtwithcode 23 วันที่ผ่านมา

      It’s the iPhone simulator that comes with Xcode

    • @gadoosher
      @gadoosher 20 วันที่ผ่านมา

      @@builtwithcode Good looks!

  • @leanprogrammer
    @leanprogrammer 24 วันที่ผ่านมา

    Niceeeee! I want More of these 😀

  • @AMBROSEOthniel
    @AMBROSEOthniel 24 วันที่ผ่านมา

    The 100dvh is key. Just learnt that

  • @ricardoweiss9410
    @ricardoweiss9410 24 วันที่ผ่านมา

    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 😃

  • @정중식-n1i
    @정중식-n1i หลายเดือนก่อน

    시작코드말고 풀코드는 없나여?,,ㅡ

    • @builtwithcode
      @builtwithcode 29 วันที่ผ่านมา

      The completed code is in the `main` branch in the linked GitHub repository

  • @buildwithharshit
    @buildwithharshit หลายเดือนก่อน

    great video

  • @gobifrontend
    @gobifrontend หลายเดือนก่อน

    nice and well explained video ❤.

  • @razeku1332
    @razeku1332 หลายเดือนก่อน

    Best tutorial i saw been 4 times watching same tutorial still doenst understand,, but this amazing thanks man

  • @Tomer-t2w
    @Tomer-t2w หลายเดือนก่อน

    Great tutorial, helped me alot thank you very much hope you find success on youtube you deserve it !

  • @emmanueltenny1930
    @emmanueltenny1930 หลายเดือนก่อน

    Thanks a lot man, ive been doing it wrong for the past hour, i really appreciate ✌✌

  • @EswarRemoteEnginneer
    @EswarRemoteEnginneer หลายเดือนก่อน

    thanks

  • @aldrinwong6160
    @aldrinwong6160 หลายเดือนก่อน

    simple! this helps!

  • @abdulrafay1951
    @abdulrafay1951 หลายเดือนก่อน

    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 }} />

  • @TusharVerma-i1k
    @TusharVerma-i1k หลายเดือนก่อน

    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?

  • @abdulrafay1951
    @abdulrafay1951 หลายเดือนก่อน

    thanks mate, was searching for it

  • @alexg7282
    @alexg7282 หลายเดือนก่อน

    Thanks !

  • @amatzen
    @amatzen หลายเดือนก่อน

    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

  • @collinsk8754
    @collinsk8754 หลายเดือนก่อน

    Neat! 😎😎

  • @gobifrontend
    @gobifrontend หลายเดือนก่อน

    Simple and very well explained video.

  • @shumit
    @shumit หลายเดือนก่อน

    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 !!

    • @builtwithcode
      @builtwithcode หลายเดือนก่อน

      Glad you found it helpful!

  • @senurakalubovila5330
    @senurakalubovila5330 หลายเดือนก่อน

    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.

    • @builtwithcode
      @builtwithcode หลายเดือนก่อน

      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.

  • @faruksardar8829
    @faruksardar8829 หลายเดือนก่อน

    Thanks a lot ✅✅👍👍

  • @chronicshippr
    @chronicshippr หลายเดือนก่อน

    Please keep making these, they are so helpful and you are a great teacher!

    • @builtwithcode
      @builtwithcode หลายเดือนก่อน

      Glad you're finding them useful!

  • @gopoo
    @gopoo หลายเดือนก่อน

    Smooth scrolling has too much delay while scrolling with mouse. Anyone experiencing?

    • @maihoonayush
      @maihoonayush หลายเดือนก่อน

      yeah do you find the solution

    • @gopoo
      @gopoo หลายเดือนก่อน

      @@maihoonayush Not yet. :(

  • @madusankajayasooriya9988
    @madusankajayasooriya9988 หลายเดือนก่อน

    mouse scroll not working. any idea?

  • @reyu_
    @reyu_ หลายเดือนก่อน

    the problem with this is when you set to darkmode then you refresh the page then it will back to light

    • @builtwithcode
      @builtwithcode หลายเดือนก่อน

      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.

  • @vanhuydev
    @vanhuydev 2 หลายเดือนก่อน

    Very nice video! Keep creating more video like this!

  • @elenbrodt3880
    @elenbrodt3880 2 หลายเดือนก่อน

    when it gets in the end of the second array, it its with a black spot, how can i fix it?

  • @bobruis4073
    @bobruis4073 2 หลายเดือนก่อน

    Pfoee I'm hooked to learn more and become good at this

  • @jaredmurphy
    @jaredmurphy 2 หลายเดือนก่อน

    Helpful!

  • @shayokhshorfuddin2576
    @shayokhshorfuddin2576 2 หลายเดือนก่อน

    Straight to the point. Thanks

  • @jpxtv69
    @jpxtv69 2 หลายเดือนก่อน

    very annoying breaking voice

  • @yunusnebioglu486
    @yunusnebioglu486 2 หลายเดือนก่อน

    Thanks 🙌

  • @josecanales6846
    @josecanales6846 2 หลายเดือนก่อน

    Amazing