WebDev For You - Daily Interaction #109

Welcome to Daily Interaction #109 :). This demo showcases a menu item animation on hover. When you hover over each menu item a line goes through the text at the top and another line reveals at the bottom adding to the menu item name. This effect was accomplished by having the top text and line inside of a wrapper with an overflow of hidden. Then the line was moved from left to right via interactions. The bottom text and block are inside of a wrapper as well, and I have the block moving in the opposite direction as the top line. One thing to note with this interaction is that the bottom block had to be moved immediately back to the right after revealing so that on hover out it comes in from left to right which is the opposite of the line movement for the top text. Inspired by: https://tympanus.net/Development/MenuHoverEffects/inola.html https://www.webdevforyou.com/ If you'd like more information on how this interaction was accomplished be sure to join the Slack Community!