WebDev For You - Daily Interaction #108

Welcome to Daily Interaction #108! This demo showcases a profile card with angled blocks that come in from the bottom. With this interaction I was experimenting with the 'elastic out' easing to make the animation a bit more playful. A name along with the blocks also appears in the upper-right with the same easing. This effect was accomplished by setting the link block wrapper to an overflow of hidden and adding 3 blocks within this wrapper with a position of absolute and full. I then angled and moved each block using transforms to get the final state for the animation. Then in the interaction I applied the same transforms and I had the blocks move in and out of the link block wrapper. The last block behind the other one has a delay as well. Inspired by: https://littlesnippets.net/snip1375 https://www.webdevforyou.com/ If you'd like more information on how this interaction was accomplished be sure to join the Slack Community!