/* The list or grid A winery's list of wines that can be seen as a list or as a grid. Switching view, every card, every bottle and every word flies from its place in one layout to its place in the other (GSAP's Flip): the cards change shape on the way, the bottles grow or shrink, the prices go from the right of the row to under the name, one card a moment after another. A bottle tips over a little, as if to pour, when the pointer rests on its card. */ /* ---- values to change ---- */ const DURATION = 0.75; /* the seconds the cards take to fly to their places in the other view */ const STAGGER = 0.035; /* the seconds between one card setting off and the next */ const TIP = 14; /* how many degrees a bottle tips when the pointer rests on its card */ const WINES = [ ['Rio Freddo', 'Lambrusco · 2024', 14, '#5b1626'], ['Pietra Bianca', 'Pignoletto · 2025', 12, '#9db36a'], ['Colle Alto', 'Sangiovese · 2022', 18, '#4a1020'], ['Brina', 'Sparkling brut · 2023', 16, '#2f4a2c'], ['Sera d’Estate', 'Rosato · 2025', 11, '#e08a90'], ['Vigna Vecchia', 'Barbera · 2021', 22, '#3a0d17'], ]; /* the wines: name, kind and year, price in euros, colour of the glass */ gsap.registerPlugin(Flip); const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; const cellar = document.querySelector('[data-cellar]'); const list = cellar.querySelector('[data-wines]'); const views = cellar.querySelector('[data-views]'); const pill = cellar.querySelector('[data-pill]'); const buttons = [...views.querySelectorAll('[data-view]')]; const live = cellar.querySelector('[data-live]'); /* a bottle: the glass, its shine, the label and the foil on the neck */ const bottle = (glass) => ``; const wines = WINES.map(([name, kind, price, glass]) => { const li = document.createElement('li'); li.className = 'wine'; li.innerHTML = `${bottle(glass)}

`; li.querySelector('.wine__name').textContent = name; li.querySelector('.wine__kind').textContent = kind; li.querySelector('.wine__price').textContent = `€${price}`; list.append(li); const glassEl = li.querySelector('.wine__glass'); gsap.set(glassEl, { transformOrigin: '50% 100%' }); /* the bottle tips a little, as if to pour */ li.addEventListener('pointerenter', (e) => { if (e.pointerType === 'touch' || REDUCED) return; gsap.to(glassEl, { rotation: TIP, duration: 0.5, ease: 'back.out(2.2)', overwrite: 'auto' }); }); li.addEventListener('pointerleave', () => { gsap.to(glassEl, { rotation: 0, duration: 0.6, ease: 'elastic.out(1, 0.45)', overwrite: 'auto' }); }); return li; }); /* ---------------------------------------------------------------- switching view */ let view = 'list'; let flip = null; function placePill(animate) { const b = buttons.find((x) => x.dataset.view === view); gsap.to(pill, { x: b.offsetLeft - 4, duration: animate && !REDUCED ? 0.45 : 0, ease: 'back.out(1.8)' }); } function setView(next) { if (next === view) return; view = next; buttons.forEach((b) => { const on = b.dataset.view === view; b.setAttribute('aria-checked', String(on)); b.tabIndex = on ? 0 : -1; }); placePill(true); live.textContent = view === 'grid' ? 'Shown as a grid' : 'Shown as a list'; if (flip) flip.progress(1); /* the cards change shape from one layout to the other, the bottles fly free over them (absolute while they fly, so the cards changing size under them do not push them about), and the words, which would be squeezed on the way, step aside and come back in their new places */ const state = REDUCED ? null : Flip.getState('.wine, .wine__bottle'); list.classList.toggle('is-grid', view === 'grid'); if (REDUCED) return; const order = { each: STAGGER, from: view === 'grid' ? 'start' : 'end' }; const words = list.querySelectorAll('.wine__name, .wine__kind, .wine__price'); flip = gsap.timeline({ onComplete: () => (flip = null) }) .add(Flip.from(state, { targets: '.wine', duration: DURATION, ease: 'power3.inOut', stagger: order }), 0) .add(Flip.from(state, { targets: '.wine__bottle', duration: DURATION, ease: 'power3.inOut', stagger: order, absolute: true }), 0) .fromTo(words, { opacity: 0, y: 8 }, { opacity: 1, y: 0, duration: 0.35, ease: 'power2.out', stagger: 0.012, immediateRender: true, clearProps: 'opacity,transform' }, DURATION * 0.65); } buttons.forEach((b) => b.addEventListener('click', () => setView(b.dataset.view))); /* the two choices are a radio group: the arrows go from one to the other */ views.addEventListener('keydown', (e) => { if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) return; e.preventDefault(); setView(view === 'list' ? 'grid' : 'list'); buttons.find((b) => b.dataset.view === view).focus(); }); /* how the page is being used: the rings of the focus show for the keys, not after a finger or the mouse */ addEventListener('keydown', () => (document.documentElement.dataset.using = 'keys'), true); addEventListener('pointerdown', () => (document.documentElement.dataset.using = 'pointer'), true); /* ---------------------------------------------------------------- the library's preview */ /* a click from a script (detail 0) switches the view, and now and then tips a bottle as a resting pointer would */ let turn = 0; cellar.addEventListener('click', (e) => { if (e.detail !== 0 || e.target !== cellar) return; turn++; if (turn % 3 === 0 && !REDUCED) { const g = wines[(turn / 3) % wines.length].querySelector('.wine__glass'); gsap.timeline() .to(g, { rotation: TIP, duration: 0.5, ease: 'back.out(2.2)' }) .to(g, { rotation: 0, duration: 0.6, ease: 'elastic.out(1, 0.45)' }, '+=0.6'); return; } setView(view === 'list' ? 'grid' : 'list'); }); /* ---------------------------------------------------------------- it comes in */ placePill(false); if (!REDUCED) { gsap.from('.cellar__head > *', { y: 10, opacity: 0, duration: 0.6, ease: 'power3.out', stagger: 0.07, clearProps: 'transform,opacity' }); gsap.from(wines, { y: 18, opacity: 0, duration: 0.6, ease: 'power3.out', stagger: 0.06, delay: 0.1, clearProps: 'transform,opacity' }); }