Animated bottom tray with Framer Motion layout animations
In this video, we will create an animated and draggable bottom tray inspired by UI from the Family app.
💾 Starter code: https://github.com/Built-With-Code/an...
⏭️ Watch This Next: • Animated custom scrollbar with Framer Moti...
Check out Emil's work: https://emilkowal.ski/ui/family-tray-...
📱 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 code
0:19 - Create Tray component
1:44 - Animating Tray enter/exit
2:43 - Background overlay
4:28 - Add Tray content
7:09 - Layout animation for switching content
8:58 - Tray drag indicator
10:03 - Fixing some layout transition morphing
10:50 - Drag controls
14:13 - 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!