<body>
<div class="container">
<section data-bgcolor="#bcb8ad" data-textcolor="#032f35">
<h1 data-scroll data-scroll-speed="3">Change background colour with GSAP ScrollTrigger</h1>
<img src="https://images.pexels.com/photos/3062948/pexels-photo-3062948.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
</section>
<section data-bgcolor="#eacbd1" data-textcolor="#536fae"><img src="https://images.pexels.com/photos/4467879/pexels-photo-4467879.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
<h2 data-scroll data-scroll-speed="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
</section>
<section data-bgcolor="#536fae" data-textcolor="#eacbd1"><img src="https://images.pexels.com/photos/5604966/pexels-photo-5604966.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
<h2 data-scroll data-scroll-speed="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
</section>
<section data-bgcolor="#e3857a" data-textcolor="#f1dba7"><img src="https://images.pexels.com/photos/4791474/pexels-photo-4791474.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
<h2 data-scroll data-scroll-speed="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
</section>
</div>
<div class="credit"><a href="https://thisisadvantage.com" target="_blank">Made by Advantage</div>
</body>
body {
font-family: termina, sans-serif;
color: var(--text-color);
background: var(--bg-color);
transition: 0.3s ease-out;
overflow-x: hidden;
}
section {
min-height: 100vh;
width: 100%;
position: relative;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 2rem;
padding: 50px 10vw;
max-width: 1000px;
margin: auto;
place-items: center;
}
img {
max-height: 80vh;
width: 100%;
object-fit: contain;
section:first-child & {
position: absolute;
}
}
h1 {
display: flex;
font-size: 4rem;
z-index: 2;
line-height: 1.2;
font-weight: 700;
@media (max-width: 768px) {
font-size: 2rem;
}
}
h2 {
font-size: 2rem;
max-width: 400px;
}
.credit {
font-family: Termina, sans-serif;
position: fixed;
bottom: 1rem;
right: 1rem;
a {
color: #fff;
}
}
* {
box-sizing: border-box;
}
View Compiled
gsap.registerPlugin(ScrollTrigger);
const scroller = new LocomotiveScroll({
el: document.querySelector(".container"),
smooth: true
});
scroller.on("scroll", ScrollTrigger.update);
ScrollTrigger.scrollerProxy(".container", {
scrollTop(value) {
return arguments.length
? scroller.scrollTo(value, 0, 0)
: scroller.scroll.instance.scroll.y;
},
getBoundingClientRect() {
return {
left: 0,
top: 0,
width: window.innerWidth,
height: window.innerHeight
};
}
});
ScrollTrigger.addEventListener("refresh", () => scroller.update());
ScrollTrigger.refresh();
window.addEventListener("load", function () {
const scrollColorElems = document.querySelectorAll("[data-bgcolor]");
scrollColorElems.forEach((colorSection, i) => {
const prevBg = i === 0 ? "" : scrollColorElems[i - 1].dataset.bgcolor;
const prevText = i === 0 ? "" : scrollColorElems[i - 1].dataset.textcolor;
ScrollTrigger.create({
trigger: colorSection,
scroller: ".container",
start: "top 50%",
onEnter: () =>
gsap.to("body", {
backgroundColor: colorSection.dataset.bgcolor,
color: colorSection.dataset.textcolor,
overwrite: "auto"
}),
onLeaveBack: () =>
gsap.to("body", {
backgroundColor: prevBg,
color: prevText,
overwrite: "auto"
})
});
});
});
