Pinned horizontale scroll

<!-- Pinned horizontale scroll · NedDev · eigen werk. -->
<!-- benodigd, één keer per pagina: -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>

<div class="jouw-container">
<div class="sfilm-root"><div class="sfilm-track"><div class="sfilm-card">01</div><div class="sfilm-card">02</div><div class="sfilm-card">03</div><div class="sfilm-card">04</div></div><div class="sfilm-bar"><i></i></div></div>
</div>

/* Pinned horizontale scroll · NedDev · eigen werk. */
.sfilm-root{position:absolute;inset:0;overflow:hidden;background:#0a0a0a}
.sfilm-track{position:absolute;inset:0;display:flex;gap:10px;padding:14px;will-change:transform}
.sfilm-card{flex:0 0 60%;display:flex;align-items:flex-end;padding:14px;color:#fff;font:34px 'Boldonse','Switzer',sans-serif;background:#1a1a1a}
.sfilm-card:nth-child(1){background:#1a1a1a}.sfilm-card:nth-child(2){background:#F5480F}.sfilm-card:nth-child(3){background:#2a2a2a}.sfilm-card:nth-child(4){background:#F5480F;color:#0a0a0a}
.sfilm-bar{position:absolute;left:14px;right:14px;bottom:8px;height:2px;background:rgba(255,255,255,.25)}.sfilm-bar i{display:block;height:100%;width:0;background:#fff}

// Pinned horizontale scroll · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
if(!window.gsap)return;var track=root.querySelector('.sfilm-track'),bar=root.querySelector('.sfilm-bar i');gsap.registerPlugin(ScrollTrigger);ScrollTrigger.create({trigger:root,start:'top 90%',end:'bottom 30%',scrub:1,onUpdate:function(s){var max=track.scrollWidth-root.clientWidth;gsap.set(track,{x:-s.progress*max});if(bar)bar.style.width=(s.progress*100)+'%';}});
}
init(document.querySelector('.jouw-container'));