← Blurr Motion process-horizontal-timeline-gallery
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-horizontal-timeline-gallery
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=1.0, DOT_DUR=1.2, DOT_STAGGER=0.07, DOT_EASE='power3.out';
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,y:20,duration:DOT_DUR,stagger:DOT_STAGGER,ease:DOT_EASE,scrollTrigger:{trigger:'.h-section',start:'top 80%',once:true}});}
2. Skeleton — DOM + class-namen, mag herschikken 
<!-- Skeleton: process-horizontal-timeline-gallery -->
<div class="demo-block">
  <!-- DOM-structuur hier -->
</div>
3. Styling-template — verplicht eigen invulling per merk 
/* Styling: process-horizontal-timeline-gallery */
:root {
  --block-bg: ;
  --block-fg: ;
  --block-accent: ;
}