Bouncy Material Design navigation drawer in CSS

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.
B1C14bCCEAAsugV.jpg-large
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.

side-bar-drawer-navigation-material-design

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:

See the Pen Elastic SVG Sidebar Material Design by Nikolay Talanov (@suez) on CodePen.

If you like these drawer animations and its “bouncy-ness”, check out few other examples:

http://sndtrck.fr/dev/menu-swipe2/

http://sndtrck.fr/dev/menu-swipe/

#development #materialdesign #examples #drawer #app #concept

3 responses on “Bouncy Material Design navigation drawer in CSS

  1. John

    Its really amazing…. Keep on doing like this…

  2. Mahdi

    Hi Dear Hercus Monte

    How can we access to this sample source code?
    are you shared it in github or so on wesites?

    Thank you…

  3. Great tuts!
    I must confess this is a blog that has captured my attention. WOW!!
    awesome job *thumbsUp

Leave a Reply