Sticky Pin + Scale

<!-- Sticky Pin + Scale · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<!-- 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="sps"><div class="sps-stage"><div class="sps-box"><span>SCALE</span></div></div></div>
</div>

/* Sticky Pin + Scale · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.sps{position:absolute;inset:0;background:#0a0a0a;overflow:hidden}
.sps-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.sps-box{width:38%;aspect-ratio:1;background:#F5480F;border-radius:14px;display:flex;align-items:center;justify-content:center;font:900 clamp(16px,3vw,30px)/1 'Boldonse','Switzer',sans-serif;color:#0a0a0a;will-change:transform}

// Sticky Pin + Scale · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.sps')||root;var box=root.querySelector('.sps-box');var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;if(!window.gsap||!window.ScrollTrigger||reduce)return;gsap.fromTo(box,{scale:.5,borderRadius:'80px'},{scale:2.2,borderRadius:'0px',ease:'none',scrollTrigger:{trigger:root,start:'top 80%',end:'bottom 30%',scrub:true}});
}
init(document.querySelector('.jouw-container'));