<div id="wrap">

	<!-- section -->
	<div class="section">
		<div class="center">

			<div class="content content--1"></div>
			<div class="content content--2">
				<div class="heads">
					<div class="head"><span>Title 1</span></div>
					<div class="head"><span>Title 2</span></div>
					<div class="head"><span>Title 3</span></div>
				</div>
			</div>

		</div>
	</div>
	<!--/section -->

</div>

html,
body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: #555;
	background: #fff;
}

* {
	box-sizing: border-box;
}

#wrap {
	position: relative;
}

.section {
	padding: 40px;
}

.center {
	width: 100%;
	max-width: 980px;
	margin: auto;
}

.content {
	&--1 {
		height: 1000px;
	}
	
	&--2 {
		height: 500px;
	}
}

.heads {
	display: flex;
}

.head {
	flex: 1 1 auto;
	font-size: 24px;
	position: relative;
	margin: 5px;
	
	&::before {
		content: '';
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		height: 1px;
		width: 100%;
		background: #000;
		transform-origin: left top;
		transition: transform 1s ease;
		transform: scaleX(0);
	}
	
	&.in-viewport {
		&::before {
			transform: scaleX(1);	
		}
	}
}

function inViewport(elem, tolerance) {	
	if(elem.offset().top <= $(window).scrollTop() + $(window).height() - tolerance) {
		elem.addClass('in-viewport');
	}
}

$(window).on('load scroll', function() {
	inViewport($('.head'), 80);
});