A compelling set of effects for off-canvas menus. It uses different layouts and transitions, making the overall page look awesome and coordinated, making space for actionable items in the menu and controls.

These effects were made using CSS transitions, CSS animations made with bounce.js, and animated SVGs using Snap.svg. Additionally, the font icons used were from Font Awesome and the random users from Random User Generator. The menu effects are:

– Top side
– Side slide
– Corner box
– Nested corner box
– Top expand
– Corner morph
– elastic
– Bubble
– Wave

This tutorial + code snippet was created by Mary Lou from Codrops.