site profile thumbnail

Description

Happy Friday, everyone! 👋 I had some fun recreating the wonderful Yeti Login Codepen by Darin S. The project is 100% Webflow and relatively simple all things considered. I broke the SVG into parts, added a hover-over-element interaction to the background, & hover in / hover out interactions to the email, password, and login fields. The "rotating" head effect is created by moving close-up elements slightly more than background elements. I.e. the nose moves 11px to the left or right, while the mouth only moves 9px. The blue face SVG moves 6px, and the body doesn't move at all. Here's the link to the original project https://codepen.io/m3eu/pen/VwYBbwO If you have any questions, feel free to drop a comment below. Thanks!
codepencloneclonedrebuildwebflowrebuildscartoonanimationhovereffectshovereffectwhilehoveringloginmembermemberswebflowmembershipsmemberstacksignupuserloginmove