Learn how-to create a fade in and out title animation using SplitText, an easy to use JavaScript utility that allows you to split HTML text into characters, words and lines.

HTML

<h1><strong>Mortal Kombat</strong> (2021)</h1>

Sass

html {
	height: 100%;
}

body {
	align-items: center;
	background-color: #00112c;
	color: #fff;
	display: flex;
	height: 100%;
	justify-content: center;
}

h1 {
	font-family: 'Rubik', sans-serif;
	font-weight: 400;
	letter-spacing: .02em;
	text-transform: uppercase;
	strong {
		font-weight: 600;
	}
}

JavaScript

var splitText = new SplitText('h1', {type: 'chars'});

var tl = gsap.timeline();


tl
	.from(splitText.chars, {duration: .5, opacity: 0, stagger: .125,  ease: 'power1. In'})
	.to(splitText.chars, {duration: .25, opacity: 0, stagger: .125,  ease: 'power3. inOut'}, '+=3');