Animate a drawer in ArcGIS JSAPI 4

Every now and then I come across some odd UI use case where I want to do something I’m not sure how to do.

This pretty much happens to me all the time.

A while ago, I wanted to add the Legend for my ArcGIS API 4 for JS app into a sidebar, but I wanted to get fancy and animate the sidebar when I open it.

At some point, I came across this post on SE that worked really well and was pretty simple. So I adapted it for a simple animated drawer in my application.

I won’t get into too much detail, but it basically utilizes requestAnimationFrame to increase or decrease the margin of the sidebar on each frame. I can also animate the ViewPadding of my map as part of the animation.

The tricky part is to do the animation smoothly. That’s where easing functions come in to play. Combining requestAnimationFrame with an easing function and that code snippet above, I was able to get a nice smooth animated drawer for my application.

You can check it out here.