* {
box-sizing: border-box;
}
html,
body {
height: 100vh;
overflow: hidden;
}
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 2rem;
padding: 2rem;
}
strong {
color: var(--color-orangey);
}
.highlight {
color: red;
font-family: serif;
}
.code {
font-family: Courier;
color: var(--color-surface-white);
}
#demo {
position: relative;
}
#quote {
font-size: clamp(2rem, 6rem, 4.5vw);
line-height: 1.2;
color: #dfdcff;
text-align: center;
}
button {
font-size: 0.75rem;
padding: 0.5rem 1rem;
cursor: pointer;
}
#nav {
padding-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75em;
flex-wrap: wrap;
}
a:visited,
a:link,
a:active {
color: var(--color-orangey);
text-decoration: none;
display: inline-block;
}
a:hover {
background-color: var(--color-orangey);
color: var(--color-surface-white);
}
span {
display: inline-block;
}
console.clear();
gsap.registerPlugin(SplitText);
document.fonts.ready.then(() => {
// Elements
const quote = document.querySelector("#quote");
const buttons = {
chars: document.querySelector("#chars"),
words: document.querySelector("#words"),
lines: document.querySelector("#lines"),
combo: document.querySelector("#charsWordsLines"),
revert: document.querySelector("#revert")
};
// Setup
let splitText = SplitText.create(quote, {
type: "words"
});
const tl = gsap.timeline();
gsap.set(quote, { perspective: 400 });
// Kill animations and revert text
function kill() {
tl.clear().time(0);
splitText.revert();
}
// Split by characters
buttons.chars.addEventListener("click", () => {
kill();
splitText.split({ type: "chars,words" });
tl.from(splitText.chars, {
duration: 1,
scale: 4,
autoAlpha: 0,
rotationX: -180,
transformOrigin: "100% 50%",
ease: "back",
stagger: 0.02
});
});
// Split by words
buttons.words.addEventListener("click", () => {
kill();
splitText.split({ type: "words" });
splitText.words.forEach((el, i) => {
tl.from(el, { duration: 1, opacity: 0, force3D: true }, i * 0.01);
tl.from(el, { duration: 1, scale: i % 2 === 0 ? 0 : 2 }, i * 0.01);
});
});
// Split by lines
buttons.lines.addEventListener("click", () => {
kill();
splitText.split({
type: "lines",
autoSplit: true,
onSplit: (self) => {
return gsap.from(splitText.lines, {
duration: 2,
opacity: 0,
x: -100,
stagger: 0.1,
ease: "expo.out"
});
}
});
});
// Split by chars, words, and lines
buttons.combo.addEventListener("click", () => {
kill();
splitText.split({ type: "chars,words,lines" });
tl.from(
splitText.chars,
{
duration: 0.6,
autoAlpha: 0,
scale: 3,
force3D: true,
stagger: 0.02
},
0.5
)
.to(
splitText.words,
{
duration: 0.2,
color: "#ff8709",
scale: 0.9,
stagger: 0.1
},
"words"
)
.to(
splitText.words,
{
duration: 0.4,
color: "white",
scale: 1,
stagger: 0.1
},
"words+=0.1"
)
.to(splitText.lines, {
duration: 0.5,
x: 100,
autoAlpha: 0,
stagger: 0.2
});
});
// Revert
buttons.revert.addEventListener("click", () => {
splitText.revert();
});
});