Motion Design Experiment with FAB

index.html

h1 Motion Design Experiment with FAB
.card
	.main
	.fab
	.fab-sha
	.close

Motion Design Experiment with FAB.markdown

Motion Design Experiment with FAB

Anurag Arora did a rather cool animation, so I decided to give it a try as well. Some magical CSS moments later I had this.

A Pen by Irem Lopsum on CodePen.

License.

script.js

$(".fab").on('click', function(){
	$(".fab").addClass("expand");
	$(".fab-sha").addClass("active");
	$(".close").addClass("active");
})

$(".close").on('click', function(){
	$(".close").removeClass("active");
	$(".fab").removeClass("expand");
	$(".fab-sha").removeClass("active");
})

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

$bg: rgb(222,222,222);
$blue: rgb(151,244,255);
$yellow: rgb(255,227,117);

$mat-sha-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background-color: $bg;
	font-family: 'Roboto';
}


h1 {
	color: darken($bg, 30%);
	font-weight: 400;
	font-size: 1em;
	text-align: center;
	margin-top: 100px;
}

.card {
	width: 260px;
	height: 350px;
	background-color: #fff;
	box-shadow: $mat-sha-1;
	margin: 50px auto;
	position: relative;
	overflow: hidden;
		
	.main {
		width: 100%;
		height: 70%;
		background-color: $blue;
		z-index: 1;
	}
	
	.fab {
		width: 50px;
		height: 50px;
		background-color: $yellow;
		position: absolute;
		z-index: 99;
		right: 20px;
		top: calc(70% - 25px);
		border-radius: 50%;
		cursor: pointer;
		box-shadow: $mat-sha-1;
		transform: scale3d(1, 1, 1);
		transition: .6s cubic-bezier(.65,-0.40,.49,1.40);
		transition-delay: .2s;
		

		&.expand {
			cursor: default;
			transform: scale3d(13, 13, 1);
			transition:.6s cubic-bezier(.65,-0.68,.49,1.94);
			transition-delay: .1s;
		}
	}
	
	.fab-sha {
		position: absolute;
		width: 50px;
		height: 50px;
		right: 20px;
		top: calc(70% - 25px);
		border: 1px solid $yellow;
		border-radius: 50%;
		transform: scale3d(.9, .9, 1);
		transition: .4s ease-in-out;
		transition-delay: .5s; 
			
		&.active {
			transform: scale3d(4, 4, 1);
			border: 3px solid $yellow;
			transition: .4s ease-in-out;
		}
	}
}

.close {
	width: 48px;
	height: 48px;
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 999;
	transform: rotateZ(0deg) scale3d(0, 0, 0);
	cursor: pointer;
	transition: .4s cubic-bezier(.65,-0.68,.49,1.94);
	
	&:before {
		content: "";
		position: absolute;
		width: 24px;
		height: 3px;
		background-color: white;
		margin-left: calc(50% - 12px);
		margin-top: calc(50% - 1.5px);
	}
	
	&:after {
		content: "";
		position: absolute;
		height: 24px;
		width: 3px;
		background-color: white;
		margin-top: calc(50% - 12px);
		margin-left: calc(50% - 1.5px);
	}
	
	&.active {
		transform: rotateZ(135deg) scale3d(1, 1, 1);
		transition: .4s cubic-bezier(.65,-0.68,.49,1.94);
		transition-delay: .4s;
	}
	
	&.remove {
		transform: rotateZ(0deg) scale3d(0, 0, 0);
		transition: .4s cubic-bezier(.65,-0.68,.49,1.94);
		transition-delay: .4s;
	}
}