Fade In Text

Use JS animation to fade in text from spans

by Jon Fuller

HTML

<div class="fade-text">
	<h3 class="ml4">
		<span class="letters letters-1">Feeling <em>anxious</em> about starting your own practice?</span>
		<span class="letters letters-2"><em>Confused</em> as to how to grow your existing practice?</span>
		<span class="letters letters-3">Thinking about going <em>REALLY BIG</em>, with multiple providers and several locations?</span>
		<span class="letters letters-4">Do you need assistance with <em>lease negotiation</em>, <em>space design</em>, <em>buildouts</em>, and <em>furniture</em>?</span>
		<span class="letters letters-5">Do you want to learn from <em>ELITE</em> professionals who are already at there you want to go?</span>
	</h3>
</div>
test
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

CSS

.fade-text {
	height: 300px;
	position: relative;
	width: 100%;
	text-align: center;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	overflow: hidden;
	color: navy;
	font-family: sans-serif;

}
.ml4 {
	position: relative;
	font-weight: 600;
	font-size: 2em;
	margin: 0;
	padding: 0;
	height: 100%;
}
.ml4 .letters {
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	opacity: 0;
}
.ml4 .letters em {
	color: orange;
	font-style: normal;
}

JavaScript

var ml4 = {};
ml4.opacityIn = [0,1];
ml4.scaleIn = [0.2, 1];
ml4.scaleOut = 3;
ml4.durationIn = 800;
ml4.durationOut = 600;
ml4.delay = 500;

anime.timeline({loop: true})
	.add({
	targets: '.ml4 .letters-1',
	opacity: ml4.opacityIn,
	scale: ml4.scaleIn,
	duration: ml4.durationIn
}).add({
	targets: '.ml4 .letters-1',
	opacity: 0,
	scale: ml4.scaleOut,
	duration: ml4.durationOut,
	easing: "easeInExpo",
	delay: ml4.delay
}).add({
	targets: '.ml4 .letters-2',
	opacity: ml4.opacityIn,
	scale: ml4.scaleIn,
	duration: ml4.durationIn
}).add({
	targets: '.ml4 .letters-2',
	opacity: 0,
	scale: ml4.scaleOut,
	duration: ml4.durationOut,
	easing: "easeInExpo",
	delay: ml4.delay
}).add({
	targets: '.ml4 .letters-3',
	opacity: ml4.opacityIn,
	scale: ml4.scaleIn,
	duration: ml4.durationIn
}).add({
	targets: '.ml4 .letters-3',
	opacity: 0,
	scale: ml4.scaleOut,
	duration: ml4.durationOut,
	easing: "easeInExpo",
	delay: ml4.delay
}).add({
	targets: '.ml4 .letters-4',
	opacity: ml4.opacityIn,
	scale: ml4.scaleIn,
	duration: ml4.durationIn
}).add({
	targets: '.ml4 .letters-4',
	opacity: 0,
	scale: ml4.scaleOut,
	duration: ml4.durationOut,
	easing: "easeInExpo",
	delay: ml4.delay
}).add({
	targets: '.ml4 .letters-5',
	opacity: ml4.opacityIn,
	scale: ml4.scaleIn,
	duration: ml4.durationIn
}).add({
	targets: '.ml4 .letters-5',
	opacity: 0,
	scale: ml4.scaleOut,
	duration: ml4.durationOut,
	easing: "easeInExpo",
	delay: ml4.delay
}).add({
	targets: '.ml4',
	opacity: 0,
	duration: 500,
	delay: 0
});