Carduri in teanc — se lipesc unul peste altul

Demo propriu, nu portare. E miscarea cardurilor de abonament de pe Pagina de carte (inspirata de deepstash.com), scoasa singura, ca sa se poata lua fara restul paginii. Pagina live: /carduri-in-teanc/. Nicio imagine.

• Patru carduri mari, unul sub altul. Cand derulezi, fiecare se lipeste sus, putin mai jos decat cel dinainte (32px), asa ca dupa ultimul se vede un teanc cu marginile celor de dedesubt.
• Cat timp cardurile urmatoare urca peste el, cardul deja lipit se micsoreaza din coltul de sus: primul ajunge la 0,85, al doilea la 0,90, al treilea la 0,95. Asa pare ca se duc in spate, nu doar ca sunt acoperite.
• La derulare inapoi, totul se desface in ordine inversa — animatia e legata direct de scroll.
• Dupa ultimul card, teancul pleaca impreuna in sus, ca un singur obiect.

• GSAP 3.13.0 + ScrollTrigger — deja globale. Fara Lenis.
• Fonturi: Bricolage Grotesque si Inter. Culorile site-ului (#111, #fff, #fff318, #FECB00).

O sectiune, doua elemente Code: demo-ul si lista de animatii. Markup 2,1 KB, CSS 3,6 KB, JS 2,1 KB. Trei ScrollTrigger-e (cate unul pe fiecare card care trebuie micsorat).

• Radacina: sectiunea .tnc, body tnc, header si footer oprite.
• Suprapunerea e CSS, nu JS: position: sticky; top: calc(var(--top) + var(--i) * var(--step)). --i sta in markup pe fiecare card (style="--i:2"); --top (96px, 72px pe telefon) si --step (32px / 20px) stau pe body.tnc.
• JS-ul doar micsoreaza: pentru fiecare card in afara de ultimul, un timeline cu scrub de la momentul in care apare cardul urmator pana cand ultimul card s-a lipit. end e o functie care citeste top-ul calculat al ultimului card, deci se potriveste singura pe telefon si dupa redimensionare.
• Ca sa adaugi un card, copiezi un <article class="tnc-card"> si ii dai urmatorul --i. Scriptul numara cardurile singur.
• Reglaj: SCALE_STEP (0,05) sus in JS.
• Lista de animatii. Al doilea element Code al paginii, „Lista de animatii (se sterge la clonare)”, pune pe marginea dreapta o eticheta neagra Animatii. La click deschide lista numerotata a miscarilor de pe pagina; un click pe un rand duce pagina la animatia respectiva si o incadreaza cateva secunde. Randurile sunt scrise in markup (data-target = selectorul elementului care se misca); scriptul nu stie nimic despre pagina. La clonare se sterge tot elementul — nu atinge demo-ul.

• Sticky nu suporta overflow: hidden pe niciun parinte. Radacina are overflow-x: clip — taie la fel, dar nu creeaza un container de derulare. Daca pui teancul intr-o pagina Bricks existenta, verifica si sectiunile parinte.
• Radacina e .tnc:not(body). Clasa din bodyClasses sta si pe body, care vine primul in document.
• transform-origin: 50% 0 pe card: cardul se micsoreaza spre marginea de sus, deci marginea vizibila din teanc ramane pe loc. Cu originea implicita (centru), marginea ar cobori si teancul ar parea ca se strica.
• Am incercat si o intunecare a cardurilor acoperite (un strat negru cu opacitate). Pe galben da un oliv murdar, asa ca am scos-o.
• Fara JavaScript cardurile tot se aseaza in teanc, doar fara micsorare.

1. Copiaza cele trei campuri intr-un element Code; clasa tnc pe sectiune si pe body.
2. Pune textul tau in carduri; pastreaza style="--i:N" in ordine.
3. Verifica: scalarile finale 0,85 / 0,90 / 0,95 / 1 cand ultimul card s-a lipit, top-urile 96 / 128 / 160 / 192px, zero overflow orizontal la latime mare si la 390px.