Route tekent zich op de kaart New

A delivery route draws itself on a stylised map as you scroll through the stops; each stop lights up when the line reaches it and the active stop in the list is highlighted. SVG with stroke-dashoffset tied to a CSS scroll-timeline and view() (Chrome, Edge, Safari 26), no map API. Without support or with reduced motion the full route is shown. For a delivery area, service area or a "quote to completion" route.

07.30Kwekerij NaaldwijkLaden: 140 bossen
08.10HonselersdijkBloemist Vreeken
08.45MonsterHotel Strand 21
09.20's-GravenzandeUitvaartcentrum
10.05Hoek van HollandTerminal, laatste stop

How to use it

Paste the HTML where the scroll effects should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
No JavaScript needed.

<!-- Route tekent zich op de kaart · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="rtk" tabindex="0" role="region" aria-label="Bezorgroute, scrollbaar">
  <div class="rtk__map" aria-hidden="true"><svg viewBox="0 0 200 200">
    <path class="rtk__sea" d="M0 0h70C52 60 40 120 6 200H0z"/>
    <path class="rtk__coast" d="M70 0C52 60 40 120 6 200"/>
    <g class="rtk__fields"><path d="M90 20h40v30H90zM140 30h40v40h-40zM110 140h50v40h-50zM160 100h30v35h-30zM80 160h25v30H80z"/></g>
    <path class="rtk__road" d="M128 128 L150 112 L170 84 L140 64 L96 44 L84 70 L62 104 L50 140 L30 172"/>
    <path class="rtk__route" pathLength="1" d="M128 128 L150 112 L170 84 L140 64 L96 44 L84 70 L62 104 L50 140 L30 172"/>
    <g class="rtk__stop rtk__s0"><circle cx="128" cy="128" r="6"/><text x="138" y="140">Naaldwijk</text></g>
    <g class="rtk__stop rtk__s1"><circle cx="170" cy="84" r="5"/><text x="128" y="98">Honselersdijk</text></g>
    <g class="rtk__stop rtk__s2"><circle cx="96" cy="44" r="5"/><text x="102" y="36">Monster</text></g>
    <g class="rtk__stop rtk__s3"><circle cx="62" cy="104" r="5"/><text x="72" y="108">'s-Gravenzande</text></g>
    <g class="rtk__stop rtk__s4"><circle cx="30" cy="172" r="6"/><text x="40" y="180">Hoek van Holland</text></g>
  </svg></div>
  <ol class="rtk__list">
    <li><span>07.30</span><b>Kwekerij Naaldwijk</b>Laden: 140 bossen</li>
    <li><span>08.10</span><b>Honselersdijk</b>Bloemist Vreeken</li>
    <li><span>08.45</span><b>Monster</b>Hotel Strand 21</li>
    <li><span>09.20</span><b>'s-Gravenzande</b>Uitvaartcentrum</li>
    <li><span>10.05</span><b>Hoek van Holland</b>Terminal, laatste stop</li>
  </ol>
</div>
</div>

/* Route tekent zich op de kaart · NedDev · eigen werk. */
.rtk{position:absolute;inset:0;overflow-y:auto;display:grid;grid-template-columns:56% 1fr;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;container-type:size;scroll-timeline:--rtk y;scrollbar-width:thin}
.rtk:focus-visible{outline:2px solid #F5480F;outline-offset:-2px}
.rtk__map{position:sticky;top:0;height:100cqh;display:grid;place-items:center;padding:8px;box-sizing:border-box}
.rtk__map svg{width:100%;height:100%;max-height:100%}
.rtk__sea{fill:#d6e2e6}.rtk__coast{fill:none;stroke:#9fb8c1;stroke-width:1}
.rtk__fields path{fill:#e6e2da;stroke:#d6d0c6;stroke-width:.6}
.rtk__road{fill:none;stroke:#cfc9bf;stroke-width:3;stroke-linejoin:round;stroke-dasharray:2 3}
.rtk__route{fill:none;stroke:#F5480F;stroke-width:3.2;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.rtk__stop circle{fill:#fff;stroke:#0a0a0a;stroke-width:2}
.rtk__stop text{font:600 9.5px 'Switzer',sans-serif;fill:#0a0a0a;paint-order:stroke;stroke:#f4f3f1;stroke-width:3px}
.rtk__s0 circle,.rtk__s4 circle{fill:#0a0a0a}
.rtk__list{list-style:none;margin:0;padding:calc(50cqh - 26px) 12px calc(50cqh - 26px) 4px;counter-reset:rtk}
.rtk__list li{display:flex;flex-direction:column;gap:1px;min-height:52px;padding:6px 0 6px 12px;border-left:2px solid #d9d6d1;font-size:11.5px;color:#5f5a54;margin-bottom:34px}
.rtk__list b{font-size:13.5px;color:#0a0a0a;letter-spacing:-.01em}
.rtk__list span{font:500 10px 'JetBrains Mono',monospace;color:#5f5a54}
@supports (animation-timeline: scroll()){
@media (prefers-reduced-motion:no-preference){
  .rtk__route{animation:rtk-draw linear both;animation-timeline:--rtk}
  .rtk__stop{animation:rtk-pop linear both;animation-timeline:--rtk;transform-box:fill-box;transform-origin:center}
  .rtk__s0{animation:none}
  .rtk__s1{animation-range:19% 23%}.rtk__s2{animation-range:48% 52%}.rtk__s3{animation-range:72% 76%}.rtk__s4{animation-range:97% 100%}
  .rtk__list li{animation:rtk-li linear both;animation-timeline:view();animation-range:cover 35% cover 65%}
}}
@keyframes rtk-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes rtk-pop{from{opacity:.25;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes rtk-li{0%,100%{border-left-color:#d9d6d1}15%,85%{border-left-color:#F5480F}}
@container (max-width:380px){.rtk{grid-template-columns:52% 1fr}.rtk__list b{font-size:12px}.rtk__list li{font-size:10.5px}}

More scroll effects

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →