fade out multi-select marquee on release
Hunter
Friday, July 31st, 2026 at 11:53 AM
2
3 let selectedImages = new Set();
4 let marqueeState = null;
5 +const MARQUEE_FADE_MS = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--marquee-fade'));
6
7 const selectionBox = document.createElement('div');
8 selectionBox.className = 'selection-box';
89 updateMarquee();
90 }
91
92 +function fadeOutMarquee() {
93 + const ghost = selectionBox.cloneNode();
94 + ghost.classList.add('releasing');
95 + grid.appendChild(ghost);
96 + setTimeout(() => ghost.remove(), MARQUEE_FADE_MS + 50);
97 +}
98 +
99 function endMarquee() {
100 if (!marqueeState) return;
101 marqueeState = null;
- selectionBox.style.display = 'none';
102 document.body.classList.remove('selecting');
103 +
104 + if (selectionBox.style.display === 'none') return;
105 + fadeOutMarquee();
106 + selectionBox.style.display = 'none';
107 }
108
109 document.addEventListener('mousemove', (e) => handleMarqueeMove(e.clientX, e.clientY));
97 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
98
99 --theme-transition: 250ms ease;
100 + --marquee-fade: 75ms;
101 transition:
102 --desk var(--theme-transition),
103 --page var(--theme-transition),
378 z-index: 999999;
379 }
380
381 +.selection-box.releasing {
382 + animation: fade-out-marquee var(--marquee-fade) ease-out forwards;
383 +}
384 +
385 +@keyframes fade-out-marquee {
386 + to {
387 + opacity: 0;
388 + }
389 +}
390 +
391 body.selecting,
392 body.selecting * {
393 cursor: crosshair !important;