Link Hover Interaction | SplittingJS

index.html

<nav>
	<a href="#" class="nav__link">
		<span class="nav__link--text" data-splitting>Home</span>
		<span class="nav__link--text" data-splitting>Home</span>
	</a>
	<a href="#" class="nav__link">
		<span class="nav__link--text" data-splitting>About</span>
		<span class="nav__link--text" data-splitting>About</span>
	</a>
	<a href="#" class="nav__link">
		<span class="nav__link--text" data-splitting>Contact</span>
		<span class="nav__link--text" data-splitting>Contact</span>
	</a>
</nav>

<div class="support">
	<a href="https://twitter.com/DevLoop01" target="_blank"><i class="fab fa-twitter-square"></i></a>
	<a href="https://dribbble.com/devloop01" target="_blank"><i class="fab fa-dribbble"></i></a>
</div>

link-hover-interaction-splittingjs.markdown

Link Hover Interaction | SplittingJS

This interactiion was Inspired from this website -> https://www.madeleinedalla.com/

A Pen by Saijo George on CodePen.

License.

script.js

console.clear();

Splitting();

scripts

<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>

style.scss

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,500&display=swap");
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:root {
	font-size: 16px;

	--link-translate-x: 3rem;
}

body {
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #000;
	overflow: hidden;
}

a {
	text-decoration: none;
	&:focus {
		outline: none;
		border: none;
	}
}

.nav {
	&__link {
		font-size: 5rem;
		color: #fff;
		display: grid;
		font-style: italic;

		&--text {
			grid-area: 1/1;
			transition: opacity 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95),
				transform 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
			.word {
				white-space: nowrap;
			}
			.char {
				display: inline-block;
				transform-origin: 50% 50% 0.4em;
				transition: transform 0.5s cubic-bezier(0.5, 0, 0, 1);
				transition-delay: calc(0ms + var(--char-index) * 25ms);
				backface-visibility: hidden;
				margin: 0 -0.02em;
			}
		}

		&--text:nth-child(1) {
			font-family: "Playfair Display";
			font-weight: 500;
		}
		&--text:nth-child(2) {
			font-family: "Roboto";
			font-weight: 500;
			opacity: 0;
			.char {
				transform: rotate3d(1, -0.5, 0, 90deg);
				// OR
				// transform: rotateX(90deg) rotateY(-45deg);
			}
		}

		&:hover {
			.nav__link--text {
				transform: translateX(var(--link-translate-x));
				&:nth-child(1) {
					opacity: 0;
					.char {
						transform: rotate3d(1, 0.3, 0, -90deg);
						// OR
						// transform: rotateX(-90deg) rotateY(-27deg);
					}
				}
				&:nth-child(2) {
					opacity: 1;
					.char {
						transform: rotate3d(0, 0, 0, 90deg);
						// OR
						// transform: rotate(0);
					}
				}
			}
		}
	}
}

@media only screen and (max-width: 20rem) {
	:root {
		font-size: 10px;
		--link-translate-x: 2rem;
	}
}

.support {
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 10px;
	display: flex;
	a {
		margin: 0 10px;
		color: #fff;
		font-size: 1.8rem;
		backface-visibility: hidden;
		transition: all 150ms ease;
		&:hover {
			transform: scale(1.1);
		}
	}
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat&amp;display=swap"rel="stylesheet" rel="stylesheet" />