site profile thumbnail

Description

Welcome to daily interaction #110. This demo showcases a social media card animation on click. For this demo I have 3 social media cards appear below the profile card on click. This effect was achieved by resizing the social media blocks from 0 to it's original size which causes the up and down motion of the profile card at the top. I also used scale, move, and opacity transformations in interactions to change the 'contact me' button from text to an arrow. Another 'contact me' text also appears in the lower left hand corner of the card when clicking. Inspired by: https://codepen.io/BeanBaag/pen/dzyGpM https://www.webdevforyou.com/ If you'd like more information on how this interaction was accomplished be sure to join the Slack Community!
webdevforyoudailyinteractioninteractionssocialmediacardscontactonclickclickwebdevbutton-arrow

More sites by WebDev For You

See profile

Related Made in Webflow Projects