Code:
Javascript/GSAP
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
gsap.registerPlugin(ScrollTrigger);
const stickyBar = document.querySelector(".sticky-bar");
const footerTrigger = document.querySelector(".trigger-footer");
const footerTriggerHeight = footerTrigger.offsetHeight;
function getStickyBarCenter() {
return stickyBar.offsetTop + stickyBar.offsetHeight / 2;
}
document.querySelectorAll(".row").forEach((row) => {
ScrollTrigger.create({
trigger: row,
start: () => `top+=${getStickyBarCenter() - 550} center`,
end: () => `top+=${getStickyBarCenter() - 450} center`,
scrub: true,
onUpdate: (self) => {
const progress = self.progress;
const maxGap = window.innerWidth < 900 ? 10 : 15;
const minGap = window.innerWidth < 900 ? 0.5 : 1;
const currentGap = minGap + (maxGap - minGap) * progress;
row.style.gap = `${currentGap}em`;
},
});
});
document.querySelectorAll(".row").forEach((row) => {
ScrollTrigger.create({
trigger: row,
start: () => `top+=${getStickyBarCenter() - 400} center`,
end: () => `top+=${getStickyBarCenter() - 300} center`,
scrub: true,
onUpdate: (self) => {
const progress = self.progress;
const maxGap = window.innerWidth < 900 ? 0.5 : 1;
const minGap = window.innerWidth < 900 ? 10 : 15;
const currentGap = minGap + (maxGap - minGap) * progress;
row.style.gap = `${currentGap}em`;
},
});
});
ScrollTrigger.create({
trigger: footerTrigger,
start: "top bottom",
end: () => `top+=${footerTriggerHeight - window.innerHeight} center`,
scrub: true,
onUpdate: (self) => {
const startTop = 50;
const endTop = 92;
const newTop = startTop + (endTop - startTop) * self.progress;
stickyBar.style.top = `${newTop}%`;
},
});
ScrollTrigger.create({
trigger: footerTrigger,
start: () =>
`top+=${footerTriggerHeight - (window.innerHeight + 100)} bottom`,
end: "bottom bottom",
scrub: true,
onUpdate: (self) => {
const fontSizeStart = window.innerWidth < 900 ? 2.5 : 1.25;
const fontSizeEnd = 9;
const newFontSize =
fontSizeStart + (fontSizeEnd - fontSizeStart) * self.progress;
stickyBar.querySelectorAll("p").forEach((p) => {
p.style.fontSize = `${newFontSize}vw`;
});
},
});
});
</script>
CSS
/* add this in the parent container as shown in the video */
.sticky-bar {
transform: translateY(-50%);
mix-blend-mode: difference;
}
.sticky-bar .item:nth-child(1),
.sticky-bar .item:nth-child(3) {
flex: 2;
}
.sticky-bar .item:nth-child(3) {
text-align: right;
}
.sticky-bar .item:nth-child(2) {
flex: 1;
text-align: center;
}
.sticky-bar .item p {
color: #fff;
font-size: 1.25vw;
}
/* add this in the container holding your logo images as shown in the video */
.clients {
width: 100%;
padding: 10em 1em;
background: #fff;
}
.row {
width: 100%;
display: flex;
justify-content: center;
gap: 1em;
}
.logo p {
font-size: 40px;
}