site profile thumbnail

Description

Welcome to daily interaction #88. This demo showcases a menu trigger animation on click. When you first click the menu trigger, the lines rotate clockwise and then the lines turn into an 'x' indicating that you can then close the menu. On the second click the 'x' stays in its current position and just returns to a 3 line horizontal menu trigger. On second click the menu trigger actually rotates back but it's not noticeable because the duration is set to 0 and the easing is set to linear. This demo was inspired by these hamburger icon animations here: https://codepen.io/carlosriera/pen/qNgAEo/ To view more daily interactions and premium content visit: https://www.webdevforyou.com/
webdevforyoudailyinteractioninteractionsmenutriggermenumenuconceptclickmenu-icon

More sites by WebDev For You

See profile