Design · November 3, 2026 · 5 min read
Native Motion on the Web: View Transitions and Scroll-Driven Animations
Fluid transitions used to be the signature of single-page apps and heavy animation libraries. The web platform now does much of it natively — with less code and better performance.
View Transitions, explained
The View Transitions API lets the browser capture the old and new state of a page and animate between them with CSS. Same-document transitions, for changes within a single page, now work in Chrome, Edge, Safari 18 and Firefox 133 and later.
Cross-document transitions: animation between real pages
The bigger shift is cross-document view transitions, which animate between separate pages of a multi-page site with no JavaScript at all. Both pages opt in with a single CSS rule: @view-transition { navigation: auto; }. Chrome and Edge support it from version 126 and Safari from 18.2, and it is a focus area of Interop 2026 — the joint effort by Apple, Google, Microsoft, Mozilla and Igalia to bring features to every browser.
Scroll-driven animations
CSS scroll-driven animations tie an animation’s progress to the scroll position or to an element’s visibility, using animation-timeline: scroll() and view(). Progress bars, reveal-on-scroll and parallax effects can run without scroll event listeners, keeping the main thread free.
Design guidelines
Native doesn’t mean “use everywhere”. Motion should explain: where something came from, what changed, what to look at next. Keep transitions short, respect prefers-reduced-motion, and never hide content behind an animation.
Key takeaways
Cross-document view transitions are an Interop 2026 priority.
Scroll-driven animations replace many scroll-listener scripts.
Every animation should have a job — and an off switch.
Planning a new website?
OB© designs and builds fast, accessible, search-ready websites in Framer, WordPress and custom code.
Sources