Elastic Navigation Firewatch
This is a small concept for enhanced UI interactions: the intention is to add a 'bouncy elastic' animation on the opening navigation. It’s certainly important to keep things subtle. Touch feedback can profit from using this sort of effect. Accordingly on this idea, I've reproduce this effect on this website with an svg morphing shape animation. The nice thing is that we can give a more “practical” interaction feedback to the user
Enhance the User Experience with SVGs
The approach was to use an SVG element and animate it from one path to another then add an elastic animation. For the SVG animation, I used snap.svg a rich animation library and easy event handing.
In UX/UI world using SVGs can make any components more compelling (buttons, menus etc). They also make the interaction feel more organic with a natural feel to it.