mattkenefick/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                background: black;
                color: white;
                font-family: sans-serif;
            }

            p {
                display: block;
                font-size: 2.5rem;
                margin: 0;
                overflow: hidden;
                position: relative;
            }

            p > span {
                display: block;
                transition: transform 0.5s ease-in-out;
            }

            p:not(.state-animate-in) span {
                transform: translate(0, 100%);
            }
        </style>
    </head>
    <body>
        <section>
            <p>Wow,</p>
            <p>I'm just like every other</p>
            <p>website on the internet now.</p>
        </section>

		<script>
			const paragraphs = [...document.querySelectorAll('p')];

			paragraphs.forEach(paragraphRef => {
				const spanRef = document.createElement('span');
				spanRef.innerHTML = paragraphRef.innerHTML;
				paragraphRef.innerHTML = '';
				paragraphRef.appendChild(spanRef);
			});

			paragraphs.forEach((paragraphRef, index) => {
				setTimeout(() => {
					paragraphRef.classList.add('state-animate-in');
				}, 150 * index);
			});
		</script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	body {
	background: black;
	color: white;
	font-family: sans-serif;
	}

	p {
	display: block;
	font-size: 2.5rem;
	margin: 0;
	overflow: hidden;
	position: relative;
	}

	p > span {
	display: block;
	transition: transform 0.5s ease-in-out;
	}

	p:not(.state-animate-in) span {
	transform: translate(0, 100%);
	}
	</style>
	</head>
	<body>
	<section>
	<p>Wow,</p>
	<p>I'm just like every other</p>
	<p>website on the internet now.</p>
	</section>

	<script>
	const paragraphs = [...document.querySelectorAll('p')];

	paragraphs.forEach(paragraphRef => {
	const spanRef = document.createElement('span');
	spanRef.innerHTML = paragraphRef.innerHTML;
	paragraphRef.innerHTML = '';
	paragraphRef.appendChild(spanRef);
	});

	paragraphs.forEach((paragraphRef, index) => {
	setTimeout(() => {
	paragraphRef.classList.add('state-animate-in');
	}, 150 * index);
	});
	</script>
	</body>
	</html>