Building an Animated Slide-in Drawer With React-Spring

Adriano Triana
May 6 · 4 min read
Photo by Monstera from Pexels

Goal

As a developer, I like simple solutions to things and I feel like common UI patterns like drawers never convey “Woah, this is easy” to me when I’m looking for the steps to build them. Also, installing an npm package that has a pre-built solution is nice but sometimes, that's more trouble than its worth and it could be better to just build your own thing custom. If any of those pain points apply to you then hopefully this article will help you out.

TLDR

Scroll all the way to the bottom if you don’t want to read the code block explanations and instead just want to open the code sandbox to see the final product 🙂

Code blocks

The trigger

<button className="openButton" onClick={handleToggleDrawer}>{isDrawerShowing ? "Close" : "Open"}</button>

The Drawer Component

<Drawer show={isDrawerShowing} />

The animated props

const props = useSpring({left: show ? window.innerWidth - 300 : window.innerWidth,position: "absolute",top: 0,backgroundColor: "#806290",height: "100vh",width: "300px"});

The animated div

<animated.div style={props}><div className="drawer">Animated Drawer!</div></animated.div>

The finished product!

Ooo ahhh 😍

Conclusion

This was a super simple example of how to create a slide-in drawer using react-spring.You should be able to use this code as a starting point and extend it to get even more sophisticated functionality and really make the drawer come to life in your personal projects and web apps. I hope you enjoyed and maybe even learned something along the way!

Geek Culture

Proud to geek out. Follow to join our +500K monthly readers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store