<p class="split">not waving but drowning</p>
body,
html {
	height: 100%;
	display: grid;
	background: linear-gradient(180deg, rgb(0, 172, 193), rgb(6, 66, 115));
}

p {
	margin: auto;
	font-family: "Alegreya Sans SC", sans-serif;
	text-align: center;
	font-size: 15vw;
	color: #fff;
	opacity: 0.8;
	line-height: 0.8em;
}
.word {
	display: block !important;
}

.char {
	opacity: 0;
}
jQuery(document).ready(function ($) {
	var split = new SplitText(".split", {
		type: "chars,words",
		charsClass: "char",
		wordsClass: "word word++"
	});

	var letter = $(".char");

	gsap.set(letter, {
		y: 5,
		opacity: 0,
		textShadow: "-5px -5px #00acc1, -10px -10px #064273"
	});

	gsap.to(letter, {
		opacity: 1,
		stagger: 0.2
	});

	gsap.to(letter, {
		y: -5,
		duration: 0.5,
		stagger: {
			each: 0.2,
			ease: "sine.inOut",
			repeat: -1,
			yoyo: true
		}
	});

	gsap.to(letter, {
		duration: 4,
		textShadow: "5px 5px #00acc1, 10px 10px #064273",
		stagger: {
			each: 0.8,
			ease: "linear",
			repeat: -1,
			yoyo: true
		}
	});
}); // end doc ready

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
  2. https://unpkg.co/gsap@3/dist/gsap.min.js
  3. https://assets.codepen.io/16327/SplitText3.min.js