octocatstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="com">
	<div class="com__content">
		<section class="com__section com__section--text">
			<h1 class="animate slideInLeft ">Communication Design</h1>
			<p class="animate slideInLeft delay-3">Communication design is a mixed discipline between design and information-development which is concerned with how media intermission such as printed, crafted, electronic media or presentations communicate with people.</p>
		</section>
		<section class="com__section com__section--text com__section--text-img">
			<div class="com__section-half">
				<h1 class="animate slideInLeft">Communication Design</h1>
				<p class="animate slideInLeft delay-2">Communication design is a mixed discipline between design and information-development which is concerned with how media intermission such as printed, crafted, electronic media or presentations communicate with people.</p>
			</div>
			<div class="com__section-half">
				<img class="animate slideInRight delay-3" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45226/ettrics-logo.svg" alt="" />
			</div>
		</section>
		<section class="com__section com__section--text centered">
			<h1 class="animate scaleIn">Communication Design</h1>
			<img class="animate scaleIn delay-3" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45226/ettrics-logo.svg" alt="" />
		</section>
		<section class="com__section com__section--text">
			<h1 class="animate slideInLeft ">Communication Design</h1>
			<p class="animate slideInLeft delay-3">Communication design is a mixed discipline between design and information-development which is concerned with how media intermission such as printed, crafted, electronic media or presentations communicate with people.</p>
		</section>
		<section class="com__section com__section--text com__section--text-img">
			<div class="com__section-half">
				<h1 class="animate slideInLeft">Communication Design</h1>
				<p class="animate slideInLeft delay-2">Communication design is a mixed discipline between design and information-development which is concerned with how media intermission such as printed, crafted, electronic media or presentations communicate with people.</p>
			</div>
			<div class="com__section-half">
				<img class="animate slideInRight delay-3" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45226/ettrics-logo.svg" alt="" />
			</div>
		</section>
		<section class="com__section com__section--text centered">
			<h1 class="animate scaleIn">Communication Design</h1>
			<img class="animate scaleIn delay-3" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45226/ettrics-logo.svg" alt="" />
		</section>
		<section class="com__section com__section--text">
			<h1 class="animate slideInLeft ">Communication Design</h1>
			<p class="animate slideInLeft delay-3">Communication design is a mixed discipline between design and information-development which is concerned with how media intermission such as printed, crafted, electronic media or presentations communicate with people.</p>
		</section>
	</div>
	<nav class="com__nav">
		<ul class="com__nav-list">
			<li class="com__nav-item">
				<a href="" class="com__nav-link">
					<span class="blue-line animate scaleInLeft delay-2"></span>
					<span class="white-line animate scaleInLeft delay-4"></span>
					<span class="white-line animate scaleInLeft delay-5"></span>
				</a>
			</li>
			<li class="com__nav-item">
				<a href="" class="com__nav-link flex-row">
					<div class="com__section-half">
						<span class="blue-line animate scaleInLeft delay-3"></span>
						<span class="white-line animate scaleInLeft delay-4"></span>
					</div>
					<div class="com__section-half">
						<span class="white-circle animate slideInRight delay-5"></span>
					</div>
				</a>
			</li>
			<li class="com__nav-item">
				<a href="" class="com__nav-link centered">
					<span class="blue-line animate scaleIn delay-3"></span>
					<span class="white-circle animate scaleIn delay-5"></span>
				</a>
			</li>
			<li class="com__nav-item">
				<a href="" class="com__nav-link">
					<span class="blue-line animate scaleInLeft delay-2"></span>
					<span class="white-line animate scaleInLeft delay-4"></span>
					<span class="white-line animate scaleInLeft delay-5"></span>
				</a>
			</li>
			<li class="com__nav-item">
				<a href="" class="com__nav-link flex-row">
					<div class="com__section-half">
						<span class="blue-line animate scaleInLeft delay-3"></span>
						<span class="white-line animate scaleInLeft delay-4"></span>
					</div>
					<div class="com__section-half">
						<span class="white-circle animate slideInRight delay-5"></span>
					</div>
				</a>
			</li>
			<li class="com__nav-item">
				<a href="" class="com__nav-link centered">
					<span class="blue-line animate scaleIn delay-3"></span>
					<span class="white-circle animate scaleIn delay-5"></span>
				</a>
			</li>
			<li class="com__nav-item">
				<a href="" class="com__nav-link">
					<span class="blue-line animate scaleInLeft delay-2"></span>
					<span class="white-line animate scaleInLeft delay-4"></span>
					<span class="white-line animate scaleInLeft delay-5"></span>
				</a>
			</li>
		</ul>
	</nav>
</div>

<a href="http://ettrics.com/code/material-design-slider-animation/" class="logo" target="_blank">
 <img class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45226/ettrics-logo.svg" alt="" /> 
</a>


            
          
!
            
              $cyan: #22E2ED;
$green: #1BAFB9;
$ease: all .5s cubic-bezier(0.23, 1, 0.32, 1);

* {
	box-sizing: border-box;
}

body {
	font-family: 'Lato';
	-webkit-font-smoothing: antialiased;
	line-height: 1.5;
}

.com {
	display: flex;
	align-items: stretch;
	height: 100vh;
	overflow: hidden;
	
	&__content {
		position: relative;
		flex: 8;
		background: #404855;
		padding: 10vh 10vw;
	}
	
	&__section {
		display: flex;
		flex-flow: column wrap;
		justify-content: center;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		padding: 0 10%;
		opacity: 0;
		visibility: hidden;
		transition: $ease;
		
		&.active {
			opacity: 1;
			visibility: visible;
		}
		
		&-half {
			flex: 1;
			height: 100vh;
			display: flex;
			flex-flow: column wrap;
			justify-content: center;
		}
		
		&--text {
			
			h1 {
				margin-bottom: 3vh;
				font-size: 48px;
				font-weight: 300;
				color: $cyan;
			}
			
			p {
				margin: 0;
				color: rgba(white, 0.9);
				max-width: 600px;
				font-size: 20px;
			}
			
			img {
				max-width: 250px;
				margin: 0 auto;
			}
			
			&.centered {
				text-align: center;
			}
		}
		
		&--text-img {
			display: flex;
			flex-flow: row wrap;
		}
	}
	
	&__nav {
		width: 90px;
	}
	
	&__nav-list {
		margin: 0;
		padding: 0;
		list-style-type: none;
		
		display: flex;
		flex-flow: column wrap;
		height: 100vh;
		overflow: visible;
	}
	
	&__nav-item {
		flex: 1;
		position: relative;
		overflow: visible;
		border-bottom: 7px solid $green;
		background: $cyan;
		transition: $ease;
		
		&.active {
			background: rgba(#20232A, 1);
		}
		
		&:last-child {
			border-bottom: none;
		}
		
		&:hover {
			flex: 2;
			
			.com__nav-link {
				transform: scaleX(1);
			}
			
			.blue-line,
			.white-line,
			.white-circle {
				transform: none;
				opacity: 1;
			}
		}
	}
	
	&__nav-link {
		display: flex;
		flex-flow: column wrap;
		justify-content: center;
		padding: 0 20%;
		position: absolute;
		width: 280%;
		height: 100%;
		left: calc(-280% + 90px);
		background: rgba(#20232A, 0.75);
		transform: scaleX(0);
		transform-origin: right center;
		transition: $ease;
		
		&.flex-row {
			flex-flow: row wrap;
		}
		
		&.centered {
			align-items: center;
		}
		
		.com__section-half {
			height: auto;
			
			&:nth-child(2) {
				align-items: center;
			}
		}
	}
}


.blue-line {
	display: block;
	width: 80%;
	height: 14px;
	background: $cyan;
	margin-bottom: 12px;
}

.white-line {
	display: block;
	width: 60%;
	height: 5px;
	background: rgba(white, 0.9);
	margin-bottom: 7px;
	
	&:nth-of-type(3) {
		width: 50%;
	}
}

.white-circle {
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(white, 0.9);
}

/* animation classes */

.animate {
	transition: $ease;
}

.slideInLeft {
	transform: translate3d(-100%, 0, 0);
	opacity: 0;
}

.slideInRight {
	transform: translate3d(100%, 0, 0);
	opacity: 0;
}

.scaleIn {
	transform: scale(0);
}

.scaleInLeft {
	transform: scaleX(0);
	transform-origin: left center;
}


@for $i from 1 through 5 {
	.delay-#{$i} {
		transition-delay: $i * .05s;
	}
}

.logo {
  position: fixed;
  bottom: 3vh;
  left: 3vw;
  z-index: 2;
  
  
  img {
    width: 45px;
    transition: $ease;
    transform: rotate(0);
  
    &:hover {
      transform: rotate(180deg) scale(1.1);
    }
  }
}
            
          
!
            
              var link = $('.com__nav-link');
var linkParent = link.parent('li');
var section = $('.com__section');
var sectionContent = section.find('*');

var switchTab = function() {
	var p = $(this).parent('li');
	var i  = p.index();
	var s = section.eq(i);
	var c = s.find('*');
	
	section.removeClass('active');
	sectionContent.removeAttr('style');
	s.addClass('active');
	
	c.css({
		transform: 'none',
		opacity: 1
	});
	
	linkParent.removeClass('active');
	p.addClass('active');
	
	return false;
};

link.on('click', switchTab);

function activeFirst() {
	section.first().addClass('active');
	section.first().find('*').css({
		transform: 'none',
		opacity: 1
	});
	linkParent.first().addClass('active');
}

activeFirst();
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console