Skip to content

Instantly share code, notes, and snippets.

@landsurveyorsunited
Created December 30, 2023 00:08
Show Gist options
  • Save landsurveyorsunited/336dab48179293fce09f941772475e4d to your computer and use it in GitHub Desktop.
Save landsurveyorsunited/336dab48179293fce09f941772475e4d to your computer and use it in GitHub Desktop.
Split text
<div class="heading">
<h1>A<span>TO</span>ZENITH</span></h1>
</div>
TweenMax.to(document.documentElement, 4, {
"--split": "50%",
repeat:-1,
repeatDelay:1,
yoyo:true,
ease: "power4.inOut"
});
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
:root {
--split: 0%;
}
body {
background-color: #111;
font-family: "Bebas Neue", arial;
margin-top: 4em;
}
.heading {
position: relative;
width: fit-content;
margin:0 auto;
}
h1 {
font-size: clamp(2rem, 20vw, 10rem);
line-height: 0.9em;
text-transform: uppercase;
text-align:center;
letter-spacing: -0.01em;
padding: 0.3em 0em;
background-image: linear-gradient(
90deg,
#d9a87e 0%,
#d9a87e var(--split),
#8c4c35 var(--split)
);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
h1:before {
content: "";
background-color: #8c4c35;
width: 3px;
height: 100%;
top: 0%;
left: var(--split);
position: absolute;
}
h1 span {
font-size: 0.3em;
line-height: 1em;
letter-spacing: 0.02em;
display: block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment