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.