Material Design - FAB Motion Animation

index.html

.card
	.card__header
	button.fab
	.card__content
		|CLOSE ME
	

Material Design - FAB Motion Animation.markdown

Material Design - FAB Motion Animation

Simple experiments about FAB and motion

Forked from Mattia Astorino's Pen Material Design - FAB Motion Animation.

A Pen by carriez on CodePen.

License.

script.js

$(".fab").on('click', function(){
	$(this).parent(".card").toggleClass("is-expandend");
	$("body").toggleClass("is-expandend");
})

scripts

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

style.css

// PEN SETTINGS

	$background-color: #880E4F;
	$header-color: #3F51B5;
	$fab-color: #F50057;

// ············································



// TOOLKITS
// ············································

// Original z shadows from polymer project
@mixin elevation( $depth ) {
	
	// 0 z-depth
	@if $depth < 1 {
		box-shadow: none;
	}	
	
	// 1 z-depth
	@if $depth == 1 {
		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
	}	
	
	// 2 z-depth
	@if $depth == 2 {
		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2),
								0 6px 10px 0 rgba(0, 0, 0, 0.3);
	}	
	
	// 3 z-depth
	@if $depth == 3 {
		box-shadow: 0 11px 7px 0 rgba(0, 0, 0, 0.19),
								0 13px 25px 0 rgba(0, 0, 0, 0.3);
	}	

	// 4 z-depth
	@if $depth == 4 {
		box-shadow: 0 14px 12px 0 rgba(0, 0, 0, 0.17),
								0 20px 40px 0 rgba(0, 0, 0, 0.3);
	}

	// 5 z-depth
	@if $depth == 5 {
		box-shadow: 0 17px 17px 0 rgba(0, 0, 0, 0.15),
								0 27px 55px 0 rgba(0, 0, 0, 0.3);
	}
}



	body {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	transition: all 500ms;
	transition-delay: 200ms;
	background-color: #ECEFF1;
	
		&.is-expandend {
		background-color:	$background-color; }
	}

	.card {
	width: 300px;
	height: 400px;
	position: relative;
	overflow: hidden;
	cursor: default;
	box-sizing: border-box;
	background-color: #FFF;
	border-radius: 4px;
	box-sizing: border-box;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
	z-index: 10;
		
		&.is-expandend {

			.fab {
			transition: all 1s cubic-bezier(0.215, 0.610, 0.355, 1.000);
			transition-delay: 200ms;
			transform: scale(30);	}

			.fab:before {
			transform: scale(6);
			opacity: 0;
			transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
			border: 3px solid $fab-color; }
		
			.card__content {
			transition: all 400ms;
			transition-delay: 400ms;
			opacity: 1;	}
		}
	}

	.card__header {
	background-color: $header-color;
	height: 70%; }

	.card__content {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: all 200ms;
	transition-delay: 0ms;
	pointer-events: none;
	color: lighten( $fab-color, 30% ); }

	.fab {
	display: block;
	position: absolute;
	width: 52px;
	height: 52px;
	right: 16px;
	transform: translateY( -50% );
	border: none;
	border-radius: 50%;
	outline: none;
	transition: all 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
	transition-dealy: 200ms;
	background-color: $fab-color;
	@include elevation( 2 );	

		&:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		border-radius: 50%;
		z-index: 1;
		opacity: 1;
		transition: all 0ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
		border: 2px solid $fab-color;	}
	}