1---
2title: View Transitions Over JS Libraries
3impact: MEDIUM
4tags: view-transition, native, performance
5---
6 
7## View Transitions Over JS Libraries
8 
9Prefer View Transitions API over JavaScript animation libraries for page transitions.
10 
11**Incorrect (JS-based transition):**
12 
13```tsx
14import { motion } from "motion/react";
15 
16function ImageLightbox() {
17  return (
18    <motion.img layoutId="hero" />
19  );
20}
21```
22 
23**Correct (native View Transition):**
24 
25```ts
26function openLightbox(img: HTMLImageElement) {
27  img.style.viewTransitionName = "hero";
28  document.startViewTransition(() => {
29    // Native browser transition
30  });
31}
32```
33