Lege winkelwagen die rondrijdt New

Empty state for a shopping cart: the trolley rolls in, brakes, tips forward to show there is nothing inside, and only a receipt of € 0.00 flutters out. Next to it one sentence and one button to the range. Click the trolley to see it again. Use it as an empty cart or empty wish list in a web shop. With reduced motion the end frame is shown right away.

Je winkelwagen is nog leeg

Voor 22:00 besteld is morgen in huis. Boven € 35 versturen we gratis.

Naar de winkel

How to use it

Paste the HTML where the components should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- Lege winkelwagen die rondrijdt · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="k7w">
  <button class="k7w__scene" type="button" aria-label="Karretje nog eens laten rijden">
    <span class="k7w__cart"><svg viewBox="0 0 100 80" aria-hidden="true"><path d="M3 12h11l4 12" fill="none" stroke="#0a0a0a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 24h72l-9 32H27z" fill="#fff" stroke="#0a0a0a" stroke-width="3" stroke-linejoin="round"/><path d="M36 28v24M50 28v24M64 28v24M24 40h62" stroke="#c9c4bc" stroke-width="1.6"/><path d="M27 56l-2 6h55" fill="none" stroke="#0a0a0a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><g class="k7w__wh"><circle cx="32" cy="70" r="6" fill="#fff" stroke="#0a0a0a" stroke-width="3"/><path d="M32 66v8" stroke="#F5480F" stroke-width="2"/></g><g class="k7w__wh"><circle cx="74" cy="70" r="6" fill="#fff" stroke="#0a0a0a" stroke-width="3"/><path d="M74 66v8" stroke="#F5480F" stroke-width="2"/></g></svg></span>
    <span class="k7w__bon" aria-hidden="true">€ 0,00</span>
  </button>
  <div class="k7w__txt">
    <p class="k7w__h">Je winkelwagen is nog leeg</p>
    <p class="k7w__p">Voor 22:00 besteld is morgen in huis. Boven € 35 versturen we gratis.</p>
    <a class="k7w__cta" href="/">Naar de winkel</a>
  </div>
</div>
</div>

/* Lege winkelwagen die rondrijdt · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.k7w{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;text-align:left;gap:12px;padding:12px 14px}
.k7w *{box-sizing:border-box}
.k7w__scene{position:relative;flex:none;width:136px;height:118px;padding:0;border:0;border-bottom:1px solid rgba(10,10,10,.18);border-radius:0;background:none;cursor:pointer;overflow:hidden}
.k7w__scene:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.k7w__cart{position:absolute;left:4px;bottom:0;width:100px;height:80px;transform-origin:74% 96%}
.k7w__cart svg{display:block;width:100px;height:80px}
.k7w__wh{transform-box:fill-box;transform-origin:center}
.k7w__bon{position:absolute;left:60px;top:46px;width:48px;padding:4px 0 8px;background:#fff;border:1px solid #0a0a0a;font-size:12px;font-weight:600;line-height:1.2;text-align:center;color:#0a0a0a;clip-path:polygon(0 0,100% 0,100% 100%,88% 88%,75% 100%,63% 88%,50% 100%,38% 88%,25% 100%,13% 88%,0 100%);opacity:0}
.k7w__txt{flex:1;min-width:0;max-width:210px}
.k7w__h{margin:0 0 4px;font-size:15px;font-weight:700;line-height:1.25}
.k7w__p{margin:0 0 12px;font-size:13px;line-height:1.45;color:#3d3d3d}
.k7w__cta{display:inline-flex;white-space:nowrap;align-items:center;height:34px;padding:0 12px;border-radius:4px;background:#0a0a0a;color:#fff;font-size:13px;font-weight:600;text-decoration:none;transition:background-color .15s}
.k7w__cta:hover{background:#333}
.k7w__cta:focus-visible{outline:2px solid #F5480F;outline-offset:2px}

// Lege winkelwagen die rondrijdt · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie
// root = het element waarin de HTML staat
function init(root){
var w = root.querySelector('.k7w'); if (!w) return;
    var scene = w.querySelector('.k7w__scene'), cart = w.querySelector('.k7w__cart'), whs = w.querySelectorAll('.k7w__wh'), bon = w.querySelector('.k7w__bon'), cta = w.querySelector('.k7w__cta');
    var rm = matchMedia('(prefers-reduced-motion: reduce)').matches, anims = [], played = false;
    var END = 'translate(22px,44px) rotate(6deg)';
    function still() { bon.style.opacity = '1'; bon.style.transform = END; }
    function play() {
      if (!cart.animate) { still(); return; }
      anims.forEach(function (a) { a.cancel(); }); anims = [];
      if (rm) { still(); return; }
      bon.style.opacity = ''; bon.style.transform = '';
      anims.push(cart.animate([
        { transform: 'translateX(-150px)', offset: 0 },
        { transform: 'translateX(4px)', offset: .33, easing: 'ease-out' },
        { transform: 'translateX(0) rotate(-4deg)', offset: .41 },
        { transform: 'translateX(0) rotate(0)', offset: .48 },
        { transform: 'translateX(0) rotate(16deg)', offset: .58, easing: 'ease-in-out' },
        { transform: 'translateX(0) rotate(16deg)', offset: .8 },
        { transform: 'translateX(0) rotate(0)', offset: 1, easing: 'cubic-bezier(.3,1.5,.5,1)' }
      ], { duration: 2700, fill: 'both' }));
      whs.forEach(function (g) {
        anims.push(g.animate([{ transform: 'rotate(-720deg)' }, { transform: 'rotate(0)' }], { duration: 900, easing: 'ease-out', fill: 'both' }));
      });
      anims.push(bon.animate([
        { opacity: 0, transform: 'translate(0,0) rotate(0)' },
        { opacity: 1, transform: 'translate(18px,-26px) rotate(-12deg)', offset: .2 },
        { opacity: 1, transform: 'translate(26px,6px) rotate(14deg)', offset: .45 },
        { opacity: 1, transform: 'translate(20px,30px) rotate(-8deg)', offset: .7 },
        { opacity: 1, transform: END }
      ], { duration: 1500, delay: 1500, easing: 'ease-in-out', fill: 'both' }));
    }
    scene.addEventListener('click', play);
    cta.addEventListener('click', function (e) { e.preventDefault(); });
    if (rm) { still(); return; }
    if ('IntersectionObserver' in window) {
      cart.style.transform = 'translateX(-150px)';
      var io = new IntersectionObserver(function (es) { es.forEach(function (e) { if (e.isIntersecting && !played) { played = true; cart.style.transform = ''; play(); io.disconnect(); } }); }, { threshold: .5 });
      io.observe(w);
    } else { play(); }
}
init(document.querySelector('.jouw-container'));

More components

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 →