Google’s Material Design guidelines explains just about everything, including side navigation, better known as “drawer”. According to the specifications, the “correct” behavior for the Material Design navigation drawer is to slide in from the left, as a sheet of paper over the canvas. Everything below the navigation drawer should be darkened by a scrim. All the content should be still visible under the scrim.
However, responsive interaction section (Point of Origin,to be precise) gives us slightly more space to improvise and make things “gently whimsical”; The interaction is thoughtful and purposeful, not random, and can be gently whimsical but never distracting.
By combining various Material Design elements and behaviors, web designers and developers can build amazing stuff. Elastic & bouncy Material Design Sidebar drawer by Jakub Antalík is a great example of how to create “gently whimsical” interactions.
But the story doesn’t end here. Developer Nikolay Talanov took one step further and recreated this awesome Material Design navigation drawer in pure CSS & JS. “I wasn’t able to fully recreate original shot animation (dynamic drag points), because it requires some decent geometry/svg skills (multiple curves required). I completed sidebar drawer without any animation libs, just simple js with requestAnimationFrame and custom easings.” – Nikolay Talanov
“Elastic SVG Sidebar Material Design” drawer in CSS & JS:
If you like these drawer animations and its “bouncy-ness”, check out few other examples: