Marketplace
Made in Webflow

WebDev For You - Daily Interaction #110

2290 views
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!
Feeling inspired?If this Made In Webflow site sparked some inspo, why not get started on a project of your own? Clone a site, purchase a template or start building from scratch.

We miss comments too!

Right now, Made in Webflow doesn't offer all of the same functionality that Showcase did, like the ability to leave comments. But don't worry: We're working to bring comments back as soon as possible!

As always, we'd love to hear your feedback! Click the link below to take a short survey about Made in Webflow.

webdevforyoudailyinteractioninteractionssocialmediacardscontactonclickclick

More by WebDev For You

See profile
View details
WebDev For You - Daily Interaction #8
215
1k