← Blurr Motion process-pinned-progress-minimal
Categorie process Tier 1 Techniek #6 Deps gsap
Step 01

Research

Step 02

Concept

Step 03

Refine

Step 04

Launch

1. Mechanisme — kopieer 1-op-1, geen styling-keuzes 
// Mechanisme: process-pinned-progress-minimal
import gsap from 'https://esm.sh/[email protected]';
// Pas toe op je eigen selector — geen stijlkeuzes hier.
import gsap from 'https://esm.sh/[email protected]';
import{ScrollTrigger}from 'https://esm.sh/[email protected]/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
if(window.matchMedia('(prefers-reduced-motion: reduce)').matches)return;
const SCRUB=0.8, FILL_DUR=0.8, FILL_EASE='power2.out', STAGGER=0.06;
const tr=document.querySelector('.h-track');
if(tr){const w=tr.scrollWidth-tr.parentElement.offsetWidth;gsap.to(tr,{x:-w,ease:'none',scrollTrigger:{trigger:'.h-section',start:'top top',end:()=>'+='+ w,pin:true,scrub:SCRUB,anticipatePin:1}});
gsap.from(tr.children,{autoAlpha:0,duration:FILL_DUR,stagger:STAGGER,ease:FILL_EASE,scrollTrigger:{trigger:'.h-section',start:'top 85%',once:true}});}
2. Skeleton — DOM + class-namen, mag herschikken 
<!-- Skeleton: process-pinned-progress-minimal -->
<div class="demo-block">
  <!-- DOM-structuur hier -->
</div>
3. Styling-template — verplicht eigen invulling per merk 
/* Styling: process-pinned-progress-minimal */
:root {
  --block-bg: ;
  --block-fg: ;
  --block-accent: ;
}