Animated hamburger menu trigger - animates from a hamburger to an "X" - SCSS, HTML, JS, Compass

animated-hamburger.html

<div class="nav-trigger">
    <span></span>
	<span></span>
    <span></span>
</div>

~animated-hamburger.js

$('.nav-trigger').on('click', function() {
	$('body').toggleClass('nav-active');
});

~animated-hamburger.scss

// Animated hamburger icon for mobile navigation
.nav-trigger {
	display: none;
	position: absolute;
	right: 20px;
	top: 20px;
	width: 20px;
	height: 16px;
	z-index: 99;
	&:hover {
		cursor: pointer;
	}
	@media (max-width: 960px) {
		display: block;
	}	
	span {
		width: 20px;
		height: 2px;
		position: absolute;
		@include transform-origin(0);
		background: black;
		@include transition-duration(0.3s);
		&:nth-of-type(1) {
			top: 0;
			left: 0px;
		}
		&:nth-of-type(2) {
			top: 7px;
			@include opacity(1);
		}
		&:last-of-type {
			bottom: 0;
			left: 0;
		}
	}
	.nav-active & {
		span {
		    background: white;
		    &:nth-of-type(1) {
			    @include rotate(45deg);
		    }
		    &:nth-of-type(2) {
			    @include opacity(0);
		    }
		    &:last-of-type {
			    @include rotate(-45deg);
		    }
	    }
	}	
}