In this GSAP and Bricks tutorial, I’ll show you how to easily create a highlight text on scroll effect as the user scrolls down the page.
Timestamps:
- 0:00 Intro / Demo
- 0:31 Add Split Text & CSS Class
- 2:50 Add GSAP Code
GSAP Code
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/SplitText.min.js"></script>
<script>
// split text scroll effect
gsap.registerPlugin(ScrollTrigger, SplitText);
// Prevent excessive refreshes on mobile
ScrollTrigger.config({
ignoreMobileResize: true
});
window.addEventListener("load", () => {
document.fonts.ready.then(() => {
const split = SplitText.create(".split-text p", {
type: "words"
});
gsap.to(split.words, {
color: "var(--wicky-charcoal)",
stagger: 0.1,
scrollTrigger: {
trigger: ".split-text",
start: "top 50%",
end: "bottom 85%",
//markers: true,
scrub: true
}
});
ScrollTrigger.refresh();
});
});
</script>
