setProperty('--scrollTop', `${this.scrollY}px`)

window.addEventListener('scroll', e => {
	document.documentElement.style.setProperty('--scrollTop', `${this.scrollY}px`) // Update method
})
gsap.registerPlugin(ScrollTrigger, ScrollSmoother)
ScrollSmoother.create({
	wrapper: '.wrapper',
	content: '.content'
})

.layers__base {
	transform: translate3d(0, calc(var(--scrollTop) / 1.6), 0);
	z-index: 0;
}
.layers__middle {
	transform: translate3d(0, calc(var(--scrollTop) / 2.5), 0);
}
.layers__front {
	transform: translate3d(0, calc(var(--scrollTop) / 5.7), 0);
}
.layer__header {
	z-index: 1;
	transform: translate3d(0, calc(var(--scrollTop) / 2), 0);
	transition: var(--transition);
	will-change: transform;
	text-transform: uppercase;
	font-weight: 900;
	color: var(--text);
	text-shadow: 0 0 15px #9d822b;
}
.layers__title {
	font-size: calc(var(--index) * 2.65);
	letter-spacing: calc(var(--index) / 2.25);
}
.main-article {
	--main-article-transform: translate3d(0, calc(var(--scrollTop) / -7.5), 0);
	min-height: 100vh;
	background-size: cover;
	background-position: center;
	color: var(--text);
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	text-align: center;
	/* Update: */
	top: -1px;
	z-index: 10;
}
.main-article__header {
	text-transform: uppercase;
	font-size: calc(var(--index) * 1.8);
	letter-spacing: calc(var(--index) / 7.5);
	transform: var(--main-article-transform);
	transition: var(--transition);
	will-change: transform;
}
.content {
	will-change: transform;
}

<div class="wrapper">
    <div class="content">

        <header class="main-header">
            <div class="layers">
                <div class="layer__header">
                    <div class="layers__title"> ... </div>
                </div>
                <div class="layer layers__base" style="background-image: url(img/base.png);"></div>
                <div class="layer layers__middle" style="background-image: url(img/middle.png);"></div>
                <div class="layer layers__front" style="background-image: url(img/front.png);"></div>
            </div>
        </header>
    
        <article class="main-article" style="background-image: url(img/1.jpg);">
            <div class="main-article__content"> ... </div>
        </article>

    </div>
</div>