// GALLERY — Sticky Grid Scroll (full Codrops technique) // 425vh container · sticky wrapper · 12 photos in 3 cols. // Timeline: gridReveal (alternating top/bottom stagger) → gridZoom (scale + spread) // → toggleContent (description + CTA fade-in, title recenters). // Lenis smooth-scroll powers it all. const Gallery = () => { const sectionRef = React.useRef(null); const wrapperRef = React.useRef(null); const contentRef = React.useRef(null); const titleRef = React.useRef(null); const descRef = React.useRef(null); const buttonRef = React.useRef(null); const gridRef = React.useRef(null); React.useEffect(() => { if (!window.gsap || !window.ScrollTrigger) return; const gsap = window.gsap; gsap.registerPlugin(window.ScrollTrigger); const ST = window.ScrollTrigger; const block = sectionRef.current; const wrapper = wrapperRef.current; const content = contentRef.current; const title = titleRef.current; const desc = descRef.current; const button = buttonRef.current; const grid = gridRef.current; if (!block || !grid) return; // ---- Lenis smooth scroll (window-driven) ---- let lenis = null; if (window.Lenis && !window.__lenis) { lenis = new window.Lenis({ lerp: 0.08, wheelMultiplier: 1.1 }); window.__lenis = lenis; lenis.on('scroll', ST.update); gsap.ticker.add((time) => lenis.raf(time * 1000)); gsap.ticker.lagSmoothing(0); } // ---- Group items by column (3 columns, round-robin) ---- const items = grid.querySelectorAll('.gal-item'); const numCols = 3; const columns = Array.from({ length: numCols }, () => []); items.forEach((item, i) => columns[i % numCols].push(item)); // ---- Initial state for content ---- gsap.set([desc, button], { opacity: 0, pointerEvents: 'none' }); let titleOffsetY = 0; if (content && title) { const dy = (content.offsetHeight - title.offsetHeight) / 2; titleOffsetY = (dy / content.offsetHeight) * 100; gsap.set(title, { yPercent: titleOffsetY }); } // ---- Reveal timeline (alternating columns) ---- const gridReveal = () => { const tl = gsap.timeline(); const wh = window.innerHeight; const dy = wh - (wh - grid.offsetHeight) / 2; columns.forEach((col, i) => { const fromTop = i % 2 === 0; tl.from(col, { y: dy * (fromTop ? -1 : 1), stagger: { each: 0.06, from: fromTop ? 'end' : 'start' }, ease: 'power1.inOut', }, 'reveal'); }); return tl; }; // ---- Zoom + spread timeline ---- const gridZoom = () => { const tl = gsap.timeline({ defaults: { duration: 1, ease: 'power3.inOut' } }); tl.to(grid, { scale: 1.85 }); tl.to(columns[0], { xPercent: -38 }, '<'); tl.to(columns[2], { xPercent: 38 }, '<'); tl.to(columns[1], { yPercent: (idx) => (idx < Math.floor(columns[1].length / 2) ? -1 : 1) * 36, duration: 0.5, ease: 'power1.inOut', }, '-=0.5'); return tl; }; // ---- Content reveal/hide ---- const toggleContent = (visible) => { if (!title || !desc || !button) return; gsap.timeline({ defaults: { overwrite: true } }) .to(title, { yPercent: visible ? 0 : titleOffsetY, duration: 0.7, ease: 'power2.inOut' }) .to([desc, button], { opacity: visible ? 1 : 0, duration: 0.4, ease: `power1.${visible ? 'inOut' : 'out'}`, pointerEvents: visible ? 'all' : 'none', }, visible ? '-=90%' : '<'); }; // ---- Master timeline ---- const masterST = gsap.timeline({ scrollTrigger: { trigger: block, start: 'top 25%', end: 'bottom bottom', scrub: true, }, }); masterST .add(gridReveal()) .add(gridZoom(), '-=0.6') .add(() => toggleContent(masterST.scrollTrigger.direction === 1), '-=0.32'); // (parallax-on-scroll removed — was bleeding the wrapper into the section above) // ---- Title fade-in ---- const titleST = gsap.from(title, { opacity: 0, filter: 'blur(18px)', yPercent: titleOffsetY + 8, duration: 1.4, ease: 'power2.out', scrollTrigger: { trigger: block, start: 'top 65%', toggleActions: 'play none none reset', }, }); // refresh after layout settles requestAnimationFrame(() => ST.refresh()); return () => { masterST.scrollTrigger?.kill(); masterST.kill(); titleST.scrollTrigger?.kill(); titleST.kill(); gsap.set([desc, button, title, ...items, grid, wrapper], { clearProps: 'all' }); }; }, []); // 12 souvenirs (3 columns × 4 rows). Color tones rotate sage / cream / beige. const photos = [ { lbl: 'Le premier regard', d: 'Mai 2019', tone: '#a8b89a' }, { lbl: 'Tbilissi', d: 'Été 2020', tone: '#c8b890' }, { lbl: 'Sous la pluie', d: 'Paris 2021', tone: '#5c6e54' }, { lbl: 'Premier voyage', d: 'Géorgie 2022', tone: '#7a8b6f' }, { lbl: 'Premier appart', d: 'Paris 2022', tone: '#9aab8f' }, { lbl: 'Vignes de Kakheti', d: 'Été 2023', tone: '#d4c4a3' }, { lbl: "Au bord de l'eau", d: 'Bretagne 2023',tone: '#7a8b6f' }, { lbl: 'Hiver', d: 'Tbilissi 2024',tone: '#3d4a36' }, { lbl: 'La demande', d: 'Décembre 2024',tone: '#5c6e54' }, { lbl: 'Le matin', d: 'Paris 2025', tone: '#c8b890' }, { lbl: 'Au parc', d: 'Été 2025', tone: '#a8b89a' }, { lbl: 'Ensemble', d: "Aujourd'hui", tone: '#8a9b80' }, ]; return (
·Notre histoire

Six ansen images

De Paris à Tbilissi, des vignes de Kakheti
aux dimanches au parc — une vie qui s'écrit.

    {photos.map((p, i) => (
  • {p.lbl} {p.d}
    • ))}
); }; const Weather = () => { const ref = React.useRef(null); const [inView] = window.useInView(ref); const t = window.useT().weather; return (
{t.label}
22°{t.temp_em}
); }; const Playlist = () => null; window.Gallery = Gallery; window.Playlist = Playlist; window.Weather = Weather;