View Transitions API: Animații Native de Pagină Fără Biblioteci JavaScript

Ce este View Transitions API?

View Transitions API este o tehnologie web nativă care permite crearea de animații fluide între stări ale aplicației — de la tranziții de pagină până la morphing-ul de elemente individuale. Spre deosebire de bibliotecile JavaScript ca Framer Motion sau GSAP, View Transitions funcționează la nivelul browserului, fără code loading suplimentar.

Suportul este acum universal: Chrome, Firefox, Safari și Edge suportă View Transitions API, ceea ce îl face o soluție viabilă pentru producție.

Setup-ul de Bază cu document.startViewTransition()

API-ul este surprinzător de simplu. Pentru tranziții single-page (SPA), tot ce trebuie să faci este să încadrezi schimbarea de stare într-o apelare la document.startViewTransition():

// Tranziție de bază între stări
document.startViewTransition(() => {
  // Schimbarea de stare aici
  updateDOM();
});

// Funcția updateDOM arată astfel:
function updateDOM() {
  const oldContent = document.querySelector('.content');
  const newContent = document.createElement('div');
  newContent.className = 'content';
  newContent.innerHTML = '<h1>Nou conținut</h1>';

  oldContent.replaceWith(newContent);
}

Browserul face automat următoarele:

1. Captura snapshot-ul stării curente a DOM-ului
2. Execută callback-ul pentru a modifica DOM-ul
3. Captura snapshot-ul noii stări
4. Animează tranziția dintre cele două stări

Pseudo-elemente CSS pentru Animații

View Transitions API oferă pseudo-elemente CSS speciale care îți permit să controlezi animația:

/* Tranziția implicită */
::view-transition-old(root) {
  animation: fade-out 0.3s ease-out;
}

::view-transition-new(root) {
  animation: fade-in 0.3s ease-in;
}

/* Definirea animațiilor */
@keyframes fade-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.95); }
}

@keyframes fade-in {
  from { opacity: 0; transform: scale(1.05); }
  to { opacity: 1; transform: scale(1); }
}

Ai control complet asupra animației — timing, easing, transformări, opacity, și orice altă proprietate CSS. Nu este necesar JavaScript pentru animarea vizuală.

Tranziții Nume pentru Morphing-ul de Elemente

Cea mai puternică funcționalitate este named view transitions — capacitatea de a specifica exact care elemente trebuie să facă morphing între stări:

/* CSS: marchează elementele cu view-transition-name */
.hero-image {
  view-transition-name: hero;
}

.page-title {
  view-transition-name: title;
}

/* Animează doar elementele cu nume */
::view-transition-old(hero) {
  animation: morph-image 0.5s ease-in-out;
}

::view-transition-new(hero) {
  animation: morph-image 0.5s ease-in-out reverse;
}

@keyframes morph-image {
  from {
    clip-path: circle(20% at 50% 50%);
    filter: blur(4px);
  }
  to {
    clip-path: circle(100% at 50% 50%);
    filter: blur(0px);
  }
}

Elementele cu același view-transition-name pe două pagini diferite vor face morphing automat între ele — de la poziție, dimensiune, până la formă și culoare.

Integrarea cu React și Next.js 16

În React și Next.js 16, View Transitions se integrează natural prin hook-ul useViewTransitionState sau prin wrapper-e personalizate:

// Componentă wrapper pentru React
'use client';
import { useTransition } from 'react';

function AnimatedLink({ href, children }) {
  const [isPending, startTransition] = useTransition();

  const handleClick = (e) => {
    e.preventDefault();
    startTransition(() => {
      // Navigarea se face cu View Transition
      document.startViewTransition(() => {
        window.history.pushState({}, '', href);
        // Actualizarea conținutului
      });
    });
  };

  return (
    <a href={href} onClick={handleClick} className={isPending ? 'opacity-50' : ''}>
      {children}
    </a>
  );
}

// Next.js 16: navigația App Router suportă View Transitions nativ
// Activează în layout.tsx:
export const experimental_viewTransition = true;

Comparație de Performanță: View Transitions vs Framer Motion vs GSAP

Iată o comparație reală între cele trei abordări:

• View Transitions API: 0KB JavaScript suplimentar, animații hardware-accelerated, suport nativ pentru morphing de elemente. Dezavantaj: limitat la tranziții de stare, nu oferă gesture control (drag, swipe).
• Framer Motion: ~30KB gzip, animații foarte flexibile, suport pentru gestures, layout animations, și spring physics. Dezavantaj: bundle size mare, dependență externă.
• GSAP: ~25KB gzip, cel mai performant motor de animații JavaScript, timeline complexe, și ScrollTrigger. Dezavantaj: licență comercială pentru features avansate, bundle size.

// Performanță: Time to Interactive (ms) - cu animații
// View Transitions:   0ms (zero JS)
// Framer Motion:     ~45ms (încărcare + parse)
// GSAP:              ~35ms (încărcare + parse)

// Dimensiune bundle (gzip)
// View Transitions:  0KB
// Framer Motion:    ~30KB
// GSAP:             ~25KB

Accesibilitate: prefers-reduced-motion

View Transitions API respectă automat setarea de accesibilitate prefers-reduced-motion a sistemului de operare. Cu toate acestea, este recomandat să adaugi explicit suport pentru utilizatorii care preferă mișcarea redusă:

/* Dezactivează animațiile pentru utilizatorii cu reduced motion */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.01ms !important;
  }
}

/* Sau folosește feature detection în JavaScript */
const prefersReducedMotion = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;

if (!prefersReducedMotion) {
  document.startViewTransition(() => {
    updateDOM();
  });
} else {
  updateDOM();
}

Când să Folosești În continuare Biblioteci JavaScript

View Transitions API este excelent, dar nu este întotdeauna soluția potrivită. Folosește în continuare Framer Motion sau GSAP când ai nevoie de:

• Animații continue (loop) — View Transitions sunt pentru tranziții unidirecționale, nu pentru animații care rulează continuu
• Gesturi interactive — drag, swipe, pinch-to-zoom necesită control JavaScript granular
• Timeline complexe — orchestrarea mai multor animații cu delay-uri și dependențe precise
• Animații 3D — GSAP și Framer Motion oferă suport mai bun pentru transformări 3D complexe
• Browser support legacy — dacă trebuie să susții browsere mai vechi, bibliotecile oferă polyfill-uri

Pe scurt: folosește View Transitions pentru tranziții de pagină și morphing de elemente. Folosește biblioteci JavaScript pentru animații interactive, complexe, și continue. Cele două abordări se completează, nu se exclud.

Întrebări frecvente

View Transitions funcționează în toate browserele?

Chrome, Edge și Safari le suportă; Firefox are suport în curs. Pentru tranziții de pagină, există fallback-uri — fără animație, dar cu funcționalitate completă. Pentru tranziții de elemente, suportul e mai larg.

Înlocuiesc Framer Motion sau GSAP?

Pentru animații de pagină și morphing de elemente, da — cu mult mai puțin cod și zero biblioteci. Pentru animații complexe de scroll, timeline-uri sau fizică, GSAP/Framer rămân mai puternice. Se pot combina.

Cum integrez View Transitions cu Next.js?

Next.js 16 are suport nativ pentru tranziții de pagină prin View Transitions API, cu API-uri simple pentru numirea elementelor și animații custom. Integrarea e documentată în ghidul oficial.