WebDev For You - Daily Interaction #114

Welcome to Daily Interaction #114. For this menu item animation we have 4 borders rotating in around the menu item text. This effect reminds me of sticks building something. The effect was accomplished by placing 4 div blocks inside of a link block. The div blocks have a position of absolute with a specific width or height and are then placed on each side of the link block with the absolute position property. This creates a border around the link block. Then I changed the transform origin for each div block so that it could rotate a specific way. Then in interactions I applied an initial rotation, scale, and opacity to each div block. I had each div block rotate back to it's original position with a delay to each div block to create the effect of the border building around the link block. I used a speed of .25 for the animations, and an easing of 'sine out.' Inspired by the Horatio menu here: https://tympanus.net/Development/LineMenuStyles/