# Transizioni animate native nel browser: le View Transitions diventano Baseline
Table of Contents
Cambiare schermata su un sito è quasi sempre uno scatto secco: un contenuto sparisce, un altro appare, senza alcun passaggio morbido. Per ottenere quelle animazioni fluide che si vedono nelle app - un’immagine che si ingrandisce, un elenco che scorre in modo ordinato - di solito servono librerie JavaScript dedicate, con codice da scrivere e mantenere. A metà ottobre 2025 è arrivata una novità che riguarda chi costruisce siti: le View Transitions same-document, cioè le transizioni animate all’interno della stessa pagina, sono diventate Baseline. In parole semplici, ora funzionano in modo affidabile su tutti i principali browser, e il grosso del lavoro lo fa il browser stesso.
La notizia in breve
Il 14 ottobre 2025 le View Transitions same-document hanno raggiunto lo stato “Baseline Newly available”. Il passaggio è avvenuto con l’uscita di Firefox 144, l’ultimo dei tre principali motori di browser a supportare la funzione. Google Chrome la offre dal 2023 (dalla versione 111) e Safari di Apple dalla versione 18, uscita a settembre 2024. Con Firefox il cerchio si chiude: la stessa funzione, scritta una volta, si comporta allo stesso modo ovunque. Il traguardo rientra in Interop 2025, l’iniziativa con cui i produttori di browser concordano un elenco di funzioni web da rendere compatibili tra loro nell’arco dell’anno.
Cosa vuol dire “Baseline”
Baseline è un’etichetta pensata per rispondere a una domanda pratica: posso usare questa funzione senza il timore di lasciare fuori una fetta di visitatori? Una funzione è Baseline quando è supportata dalle versioni recenti dei browser costruiti sui tre motori più diffusi: Chromium (Chrome, Edge e altri), WebKit (Safari) e Gecko (Firefox).
Lo stato “Newly available” indica che il traguardo è stato appena raggiunto: la funzione è pronta all’uso, ma i dispositivi più datati potrebbero avere versioni di browser ancora prive del supporto. Con il tempo, quando gli aggiornamenti si diffondono, lo stato passa a “Widely available”. Sapere che una funzione è Baseline aiuta a decidere con serenità se adottarla in un progetto reale.
Che cos’è una view transition
Una view transition è un’animazione che collega due stati di una pagina. Immagina una galleria di foto: si tocca una miniatura e la si vede crescere fino a diventare l’immagine grande, invece di comparire di colpo. Prima, un effetto del genere andava costruito a mano.
Il meccanismo, dal punto di vista del browser, è semplice da raccontare. Quando si avvia una transizione, il browser scatta una “fotografia” della pagina com’è adesso, lascia che il contenuto cambi, scatta una seconda fotografia del nuovo stato e anima il passaggio dalla prima alla seconda. L’effetto predefinito è una dissolvenza incrociata: il vecchio aspetto sfuma mentre il nuovo compare. Con poche righe di stile CSS si possono poi ottenere movimenti più elaborati, come uno scorrimento o un ingrandimento.
La novità di ottobre riguarda le transizioni same-document, cioè quelle che avvengono senza cambiare pagina, mentre il contenuto viene aggiornato via JavaScript. È lo scenario tipico delle applicazioni a pagina singola (in inglese single-page application), dove il sito riscrive parti della schermata senza ricaricare tutto. Esiste anche una variante cross-document, pensata per le transizioni tra pagine diverse durante la normale navigazione: è una funzione collegata ma distinta, che segue un percorso a sé e non è l’oggetto di questo annuncio.
Il problema che risolve
Fino a ieri, per animare in modo curato il passaggio tra due stati servivano quasi sempre librerie JavaScript specializzate, un po’ come succedeva per posizionare tooltip e menu prima del CSS Anchor Positioning. Sono strumenti validi, ma hanno un costo: codice in più da caricare e mantenere, animazioni da sincronizzare a mano, e il rischio di appesantire la pagina. C’è anche un tema di coerenza, perché ogni libreria fa le cose a modo suo.
Spostando questo lavoro dentro il browser, gran parte di quel codice non serve più. Il browser conosce la posizione e l’aspetto degli elementi prima e dopo il cambiamento, quindi può calcolare l’animazione in modo efficiente. Per molti casi comuni si ottiene così una transizione gradevole senza aggiungere alcuna libreria, con un beneficio indiretto anche sulla reattività della pagina alle interazioni, la stessa che misura l’INP.
Come funziona, in pratica
Il cuore della funzione è un solo metodo, document.startViewTransition(). Gli si passa la funzione che modifica il contenuto della pagina, e il browser si occupa dell’animazione.
// Aggiornamento senza animazionefunction aggiornaPagina() { // ... qui si modifica il contenuto della pagina ...}
// Con una transizione animata, quando il browser la supportafunction aggiornaConTransizione() { if (!document.startViewTransition) { aggiornaPagina(); // ripiego: aggiorna e basta return; } document.startViewTransition(() => aggiornaPagina());}Il punto chiave è il controllo if (!document.startViewTransition): se il browser non conosce la funzione, il contenuto viene aggiornato lo stesso, solo senza animazione. Questo approccio, chiamato miglioramento progressivo, fa sì che il sito resti pienamente funzionante ovunque, con l’animazione come extra dove è disponibile.
Per animare un singolo elemento in modo indipendente dal resto - per esempio far “viaggiare” un’immagine dalla miniatura alla sua versione grande - si assegna un nome tramite la proprietà CSS view-transition-name. Il browser riconosce che quell’elemento è lo stesso prima e dopo il cambiamento, e lo anima di conseguenza invece di limitarsi alla dissolvenza generale.
Cosa cambia per chi fa frontend, e qualche avvertenza
Per chi sviluppa interfacce, il vantaggio principale è meno codice da scrivere per un risultato più fluido. Restano però un paio di dettagli da tenere presenti.
Il primo riguarda Firefox: la sua prima versione con questa funzione non include ancora le cosiddette tipologie di transizione (view transition types), uno strumento più avanzato per applicare animazioni diverse a seconda del contesto. Chi ne ha bisogno può prevedere un comportamento di ripiego, esattamente come nel controllo mostrato sopra.
Il secondo è l’accessibilità. Non tutti gradiscono le animazioni, e alcune persone le trovano fastidiose o fonte di disagio. I sistemi operativi offrono un’impostazione per ridurre il movimento, che sul web si legge con la regola CSS prefers-reduced-motion. È buona norma rispettarla, riducendo o togliendo l’animazione a chi l’ha richiesta.
In sintesi
Le View Transitions same-document sono diventate Baseline il 14 ottobre 2025, con l’arrivo del supporto in Firefox 144 accanto a Chrome e Safari. In pratica, il browser può ora animare da solo il passaggio tra due stati di una pagina, un compito che prima richiedeva quasi sempre librerie JavaScript, proprio come sta succedendo con altre funzioni portate nativamente nel browser, ad esempio l’intelligenza artificiale eseguita direttamente lì dentro. Per chi costruisce siti significa meno codice, animazioni più coerenti e pagine potenzialmente più leggere, a patto di gestire con cura i browser più datati e le preferenze di chi non vuole movimento. È una di quelle novità silenziose che, nel tempo, rendono il web un po’ più piacevole da usare.
