The Text Reveal animates heading characters from a muted grey to full colour as they scroll into view, creating a progressive reveal effect.
You can edit the code by going into any Page Settings → Before </body> tag.
function initTextReveal() {
const quoteHeadings = document.querySelectorAll('.quote-01---heading');
if (quoteHeadings.length === 0) return;
quoteHeadings.forEach((heading) => {
const textSplit = new SplitText(heading, {
type: 'words, chars',
charsClass: 'split-char',
wordsClass: 'split-word',
});
// Each char starts at background color
gsap.set(textSplit.chars, {
color: '#191A1C',
});
// Animate each char individually on the timeline
gsap.to(textSplit.chars, {
color: '#C2C6CC',
duration: 0.1,
ease: 'power2.inOut',
stagger: {
each: 0.015,
from: 'start',
},
scrollTrigger: {
trigger: heading,
start: 'top 75%',
end: 'top 35%',
scrub: 0.5,
},
});
});
}
initTextReveal();
You can modify the values below to adjust the colours, timing and scroll trigger positions.
// The starting (unrevealed) colour of each character
gsap.set(textSplit.chars, { color: "#191A1C" });
gsap.to(textSplit.chars, {
color: "#C2C6CC", // The final (revealed) colour of each character
duration: 0.1, // Duration of each individual character's transition
ease: "power2.inOut",
stagger: {
each: 0.015, // Delay between each character animating (lower = faster cascade)
from: "start" // Direction of the cascade: "start", "end", or "center"
},
scrollTrigger: {
trigger: heading,
start: "top 75%", // When the animation begins (relative to viewport)
end: "top 35%", // When the animation ends (relative to viewport)
scrub: 0.5 // Smoothness of scroll-linked animation (higher = more lag)
}
});
To temporarily disable the code, comment out the whole block like this.
<!--
function initTextReveal() {
...
}
initTextReveal();
-->