WebDev For You - Daily Interaction #102
Welcome to daily interaction #102!
This one was a lot of fun. It is a profile card that has different shapes scaling and moving over the card on hover. I might do more of these with different shapes and animations. The top circle has social media icons to make it a more functional card, and the bottom has the name of the person in the rectangle.
The part that took the longest was actually adding all the shapes into the card. I used specific wrappers and then positioned certain shapes around the wrapper with a position of absolute. For the rectangles at the bottom I skewed them on the x-axis to -20px. One thing to note, is that when you add a 'move' interaction to these shapes the skew property gets removed so you have to add the skew property as an initial state in the interaction as well.
Happy Webflowing!
Inspired by: https://codepen.io/chhiring90/pen/zLJLBG
And if you'd like more information on how this interaction was accomplished be sure to join the Slack Community!