TLDR Design · OPINIONS & TUTORIALS

BUILDING A DRAWER COMPONENT

emilkowal.ski9 min read

Summary from the TLDR Design newsletter

How to rebuild the Apple’s Sheet component but for the web using React. To close it, users can just “flick it” instead of dragging it down. Dragging it upwards beyond its size will cause a minor slow-down animation to reflect how items move in real life. Scrolling inside the drawer is also made possible and the background gets animated just like it does on iOS.