Lando Norris Text Effect Syntax Challenge

index.html

<nav>
	<a href="#" class="split" style="--font-width: 125">
		TikTok
	</a>
	<a href="#" class="split">
		Instagram
	</a>
	<a href="#" class="split" style="--font-width: 94.5">
		Twitter
	</a>
	<a href="#" class="split" style="--font-width: 93">
		Bluesky
	</a>
	<a href="#" class="split" style="--font-width: 92">
		YouTube
	</a>
</nav>

lando-norris-text-effect-syntax-challenge.markdown

Lando Norris Text Effect Syntax Challenge

A Pen by Jason Lengstorf on CodePen.

License.

script.js

let split = SplitText.create(".split", {
	type: "chars",
	tag: "span",
	propIndex: true
});

scripts

<script src="https://unpkg.com/gsap@3/dist/SplitText.min.js"></script>

style.css

@import url("https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&display=swap");

body {
	background: #282c20;
	display: grid;
	min-block-size: 100dvb;
	place-items: center;
}

nav {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

a {
	color: #f4f4ed;
	display: flex;
	font-family: "Mona Sans", sans-serif;
	font-optical-sizing: auto;
	font-size: 2rem;
	font-style: normal;
	font-variation-settings: "wdth" var(--font-width, 77);
	font-weight: 900;
	line-height: 0.8;
	overflow: hidden;
	text-decoration: none;
	text-shadow: 0 1em 0 #f4f4ed;
	text-transform: uppercase;

	span {
		/* this is extremely extra, but wanted to Use The Platform™ */
		--i: var(--char);
		@supports (flex-grow: sibling-index()) {
			--i: sibling-index();
		}

		text-box: trim-both cap alphabetic;
		transition: 300ms translate cubic-bezier(0.2, 0, 0.5, 1);
		translate: 0;
		transition-delay: calc(40ms + var(--i, 0) * 20ms);
	}

	&:hover span {
		translate: 0 -1em;
	}
}