Do I still need Lenis if CSS scroll-driven animations work natively?

It depends on whether you want smooth-scroll feel or scroll-driven effects. CSS scroll-driven animations replace ScrollTrigger for many fade-in and parallax cases, but they animate based on scroll position only. They do not change how the scroll itself feels. Lenis adds momentum and easing to the scroll-wheel reading. If your design brief calls for a fluid, decelerating scroll, you still need Lenis. If the design only needs elements to react as they enter the viewport, CSS alone is enough.

Is GSAP completely free for commercial projects in 2026?

Yes. On April 30, 2025, Webflow (which acquired GSAP in late 2024) released the entire library, including every previously paid Club plugin like SplitText, MorphSVG, MotionPath, DrawSVG, and ScrollSmoother, under a standard license that covers commercial use at no cost. The license applies regardless of whether the project runs on Webflow or elsewhere, and the original GreenSock team maintains GSAP full-time at Webflow.

Does Lenis hurt Core Web Vitals?

Lenis itself is about 3 kB gzipped and runs after first paint, so its direct impact on LCP is small. The risk is indirect: Lenis hijacks the scroll loop, which means any layout shift, image decode, or third-party script that runs during scroll will be felt more sharply by the user. Audit Lenis sites for CLS and INP, not LCP. If INP regresses, reduce the number of scroll-bound effects rather than removing Lenis.

How do I handle prefers-reduced-motion across this stack?

Wrap every GSAP ScrollTrigger setup inside gsap.matchMedia() with a (prefers-reduced-motion: no-preference) query. For Motion, gate animated components with the useReducedMotion hook and serve a static variant when reduced motion is preferred. Put CSS scroll-driven animations inside an @media block with the same query. For Lenis, expose a toggle that calls lenis.stop() and lets native scroll take over for users who request reduced motion. Ship the reduced-motion variant first; the animated variant is enhancement.

Stack web immersivo nel 2026: Lenis, GSAP, e cosa lasciare fuori

Streaks of light from a moving train at night.

Lo stack web immersivo è un piccolo insieme di librerie di motion che gestisce smooth scroll, animazioni legate allo scroll e transizioni a livello di componente per un sito marketing o una landing di prodotto. Nel 2026 lo stack giusto è più piccolo di due anni fa. Webflow ha acquisito GSAP e ad aprile 2025 ha reso gratuiti tutti i plugin. Lenis si è consolidato in un unico pacchetto mantenuto da Darkroom Engineering. I browser basati su Chromium e Safari 18 ora supportano nativamente le scroll-driven animations in CSS. Il risultato: la maggior parte dei siti ha bisogno di due librerie più una feature CSS, non di cinque librerie più una pipeline di build.

Sotto trovi lo stack che usiamo in produzione per pagine marketing, landing di prodotto e siti di case study. Scegliamo per lavoro, non per brand. I criteri sono: peso del bundle (ogni kB ritarda l'LCP), compatibilità con React 19 e Next.js 16 App Router, segnale di manutenzione nel 2026, un percorso onesto per prefers-reduced-motion, costo di licenza zero.

Cosa abbiamo misurato

Peso del bundle. Tutto ciò che finisce nel chunk principale mangia LCP. Contiamo la dimensione gzipped sulla superficie di import che usiamo davvero, non il numero da copertina sulla homepage.
React 19 + Next.js 16 App Router. Server Components per default. Client island solo dove vive il motion.
Segnale di manutenzione. Ultima release entro sei mesi, issue triagiate, owner identificabile.
prefers-reduced-motion. La libreria rispetta il media query out of the box, oppure rende banale disattivare. Animazioni che ignorano i disturbi vestibolari falliscono il pavimento di accessibilità.
Costo. Gratis per uso commerciale, nessun tier Club, nessun rischio di audit.

1. Lenis (smooth scroll)

Lenis è una libreria di smooth scroll da 3 kB di Darkroom Engineering, il team prima noto come Studio Freight. Sequestra lo scroll nativo, applica un easing sulla posizione di scroll ed espone un callback di tick a cui le altre librerie si agganciano. La linea 1.3.x è il target di produzione attuale, con lenis/react come adapter React. Il pacchetto @studio-freight/react-lenis è stato ritirato nella consolidazione.

Cosa risolve. La sensazione scattosa, ancorata alla pagina, dello scroll nativo sui siti marketing lunghi. Lenis trasforma lo scroll in un valore animato in continuo, condizione necessaria per ogni effetto parallax, ogni transizione sticky e ogni fioritura legata alla velocità di scroll che vedi sui siti da award.

Dove cade corto. Lenis prende possesso del loop di scroll. Anchor scrolling, overscroll bounce nativo su iOS e strumenti di accessibilità che dipendono dal comportamento nativo dello scroll richiedono gestione extra. Su un sito di documentazione o una dashboard SaaS Lenis è peso. Saltalo.

Per chi è. Siti marketing, landing di prodotto e pagine di case study dove lo scroll stesso è parte del brand.

2. GSAP core (motore di animazione)

GSAP è il motore di animazione JavaScript canonico. Il suo core pesa circa 27 kB gzipped, è ottimizzato su requestAnimationFrame e la sua API di timeline non ha un vero equivalente in altre librerie. Il 30 aprile 2025, Webflow (che ha acquisito GSAP a fine 2024) ha rilasciato l'intera libreria, inclusi tutti i plugin Club prima a pagamento, sotto licenza standard che copre l'uso commerciale senza costi. SplitText, MorphSVG, MotionPath, DrawSVG e ScrollSmoother ora sono gratuiti. Il team originale GreenSock mantiene GSAP a tempo pieno dentro Webflow.

Cosa risolve. Animazioni sequenziate e performanti su proprietà arbitrarie (CSS, SVG, canvas, three.js). Quando ti serve una timeline con dodici step staged che si mette in pausa sull'hover e si inverte al click, GSAP è l'unica opzione matura che lo fa senza droppare frame.

Dove cade corto. API imperativa. L'animazione la scrivi, non la dichiari. Per l'entrata e l'uscita a livello di componente Motion (il successore React-friendly di Framer Motion) è più ergonomico.

Per chi è. Qualsiasi sito con più di una sezione scroll-triggered, o un hero che richiede più di una keyframe CSS.

3. GSAP ScrollTrigger (posizioni legate allo scroll)

ScrollTrigger è il plugin di GSAP che lega una timeline a una posizione di scroll, a un'intersezione con il viewport o a un tick di Lenis. Stessa licenza del core (gratuita). È la parte dello stack che fa la matematica: pinna questo elemento da 200 px a 800 px di scroll, scrubba questa timeline mentre l'utente passa, esegui questo callback quando il trigger entra nel viewport.

Cosa risolve. La logica posizionale delle sequenze scroll-driven. Pinning, scrubbing, snapping, batching, parallax. Molti di questi nel 2026 li fai in puro CSS per i casi semplici (vedi sezione seguente), ma ScrollTrigger gestisce i casi che CSS non copre: timeline che attraversano più sezioni, letture di velocità dello scroll, callback che lanciano JavaScript a un punto di scroll.

Dove cade corto. L'integrazione con Lenis è ben documentata ma fragile. Sincronizzi lo scroll di Lenis a ScrollTrigger.update, metti il raf di Lenis sul ticker di GSAP e disabiliti il lag smoothing di GSAP. Sbaglia uno dei tre e lo scroll si scollega dall'animazione. Il pattern è risolto, ma è debito di configurazione, non magia.

Per chi è. Qualsiasi sito che pinna, scrubba o sequenzia sullo scroll. Se la risposta è "ci serve solo un fade-in quando l'elemento entra in viewport", usa CSS.

4. Scroll-driven animations in CSS (nativo)

Da Chrome 115 (2023) e Safari 18 (2024), CSS supporta animation-timeline: scroll() e animation-timeline: view(). Girano sul thread del compositor, spediscono zero JavaScript e degradano in modo grazioso dove non sono supportate. La guida MDN copre la sintassi per intero. Firefox richiede ancora un flag, ma Firefox ora è sotto il 3% del traffico globale sulla maggior parte delle audience B2B SaaS.

Cosa risolve. Fade all'ingresso, sfondi parallax, barre di progresso di lettura, transizioni di sezione sticky, qualsiasi cosa in cui l'animazione è funzione della posizione di scroll o della visibilità dell'elemento nel viewport. Con @supports (animation-timeline: view()) spedisci la versione CSS e tieni un fallback JavaScript solo per Firefox.

Dove cade corto. Nessuna API di callback. Non leggi la velocità di scroll, non lanci JavaScript arbitrario a un punto di scroll, non esegui una timeline che agisce su tre elementi a velocità diverse dallo stesso trigger. Per quelli, ScrollTrigger.

Per chi è. Ogni sito, per i casi che ci stanno. Usato come baseline, il CSS nativo toglie da 30 a 90 kB di JavaScript dalla pagina marketing media.

5. Motion (ex Framer Motion)

Motion (il progetto prima pubblicato come framer-motion) è la libreria di animazione React-native per transizioni a livello di componente, layout animations, animazioni di exit e gesture. Circa 30 kB gzipped con layout animations e AnimatePresence inclusi. È dichiarativa: scrivi animate={{ x: 100 }} su un componente, la libreria fa il resto.

Cosa risolve. Animazione UI. Modali che entrano ed escono pulite, transizioni di layout quando gli elementi si riordinano, drag and drop, animazioni di lista. I casi in cui altrimenti ricorreresti a stato React più classi CSS più setTimeout.

Dove cade corto. Animazione legata allo scroll su larga scala. Con 60+ elementi animati sulla stessa pagina o una timeline di scroll a 15 step, Motion droppa frame perché ogni tick di animazione passa per il ciclo di vita di React. GSAP vince quei casi sull'architettura.

Per chi è. App SaaS con transizioni di layout, siti marketing che hanno bisogno di pochi modali eleganti o micro-interazioni in hover. Affiancalo a GSAP se la stessa pagina esegue anche una sequenza scroll pesante.

6. View Transitions API (transizioni di pagina native)

API nativa del browser per animare tra due stati del DOM, o tra due pagine con il supporto cross-document atterrato in Chrome e Safari nel 2025. Costo zero in libreria, integrazione piena con la pipeline di rendering.

Cosa risolve. Transizioni page-to-page su siti multi-pagina senza un router che gestisce uno shadow DOM. Le View Transitions cross-document tolgono l'ultima ragione tecnica per spedire un router client-side su un sito di contenuto.

Dove cade corto. Il supporto Firefox è ancora irregolare e l'API richiede pulizia accurata quando lo stato cambia a metà transizione. Non sostituisce l'animazione di layout dentro una singola pagina.

Per chi è. Siti di contenuto e pagine marketing dove il brand guadagna dalla continuità tra le route.

Il confronto

ToolPeso (gzip)LavoroCostoLenis~3 kBLoop di smooth scrollGratis (MIT)GSAP core~27 kBTimeline animationGratis (da apr 2025)ScrollTrigger~12 kBMatematica scroll-boundGratis (da apr 2025)Scroll-driven CSS0 kB JSEffetti scroll su compositorNativoMotion~30 kBAnimazione componente ReactGratis (MIT)View Transitions0 kB JSMorph page-to-pageNativo

Come scegliere

L'albero decisionale che seguiamo su ogni progetto:

Dashboard SaaS o app di prodotto. Solo Motion, per le transizioni di layout e l'ingresso dei modali. Niente Lenis, perché interferisce con le affordance native di scroll dentro tabelle dati e dashboard. Scroll-driven CSS per qualsiasi effetto di scroll decorativo.
Pagina marketing con una o due sezioni animate. Solo scroll-driven CSS. Salta lo stack JavaScript per intero.
Pagina marketing o landing di prodotto con parallax, sezioni pinnate o storytelling scroll-driven. Lenis e GSAP ScrollTrigger. Tieni Motion fuori se non hai anche transizioni di layout.
Pagina di case study o sito editoriale long-form. Stack completo: Lenis, GSAP, ScrollTrigger, scroll-driven CSS come baseline, Motion per i pezzi a livello di componente. È il caso in cui il budget si ripaga da solo.
Sito di documentazione o di contenuto. Solo CSS. Lenis rompe lo scrolling con anchor link e la navigazione con screen reader. Tutto il resto è debito decorativo.

Il pavimento di accessibilità

Ogni animazione in questo stack deve rispettare prefers-reduced-motion. GSAP offre gsap.matchMedia(), che ti permette di limitare un intero setup ScrollTrigger a un media query e di rovesciarlo automaticamente quando il query non corrisponde più. Motion rispetta la preferenza utente tramite l'hook useReducedMotion. Le scroll-driven animations in CSS vanno dentro blocchi @media (prefers-reduced-motion: no-preference). Lenis espone flag che disattivi per gli utenti reduced-motion, così lo scroll nativo riprende.

L'animazione che ignora i disturbi vestibolari non è un trade-off di feature, è un fallimento di accessibilità. Spedisci prima la variante reduced-motion; quella animata è enhancement.

Foto di Maitreya Parab ↗ su Unsplash ↗

Domande frequenti

Do I still need Lenis if CSS scroll-driven animations work natively?: It depends on whether you want smooth-scroll feel or scroll-driven effects. CSS scroll-driven animations replace ScrollTrigger for many fade-in and parallax cases, but they animate based on scroll position only. They do not change how the scroll itself feels. Lenis adds momentum and easing to the scroll-wheel reading. If your design brief calls for a fluid, decelerating scroll, you still need Lenis. If the design only needs elements to react as they enter the viewport, CSS alone is enough.
Is GSAP completely free for commercial projects in 2026?: Yes. On April 30, 2025, Webflow (which acquired GSAP in late 2024) released the entire library, including every previously paid Club plugin like SplitText, MorphSVG, MotionPath, DrawSVG, and ScrollSmoother, under a standard license that covers commercial use at no cost. The license applies regardless of whether the project runs on Webflow or elsewhere, and the original GreenSock team maintains GSAP full-time at Webflow.
Does Lenis hurt Core Web Vitals?: Lenis itself is about 3 kB gzipped and runs after first paint, so its direct impact on LCP is small. The risk is indirect: Lenis hijacks the scroll loop, which means any layout shift, image decode, or third-party script that runs during scroll will be felt more sharply by the user. Audit Lenis sites for CLS and INP, not LCP. If INP regresses, reduce the number of scroll-bound effects rather than removing Lenis.
How do I handle prefers-reduced-motion across this stack?: Wrap every GSAP ScrollTrigger setup inside gsap.matchMedia() with a (prefers-reduced-motion: no-preference) query. For Motion, gate animated components with the useReducedMotion hook and serve a static variant when reduced motion is preferred. Put CSS scroll-driven animations inside an @media block with the same query. For Lenis, expose a toggle that calls lenis.stop() and lets native scroll take over for users who request reduced motion. Ship the reduced-motion variant first; the animated variant is enhancement.

Studio