Look, we get it, your boss wants everything to work the same in every browser. We're all about progressive enhancement here but we know a lot of organisations don’t like working like that, so Sunkanmi is here to help you navigate implementing view transitions with that in mind.

Piccalilli's resource offers insights, tutorials, and resources for frontend developers and web designers. Readers can learn about HTML, CSS, and JavaScript techniques, as well as design principles and accessibility. With articles, tutorials, and design showcases, Piccalilli provides  guidance and inspiration for creating modern and accessible web experiences.

Piccalilli

Implementing smooth page transitions using the View Transitions API with CSS is straightforward, but older browsers need fallbacks. This guide demonstrates a JavaScript-based fallback using DOMContentLoaded and requestAnimationFrame() to create similar transition effects. The approach adds reveal animations to page elements, handles exit animations on navigation, and includes progressive enhancement by detecting View Transitions API support. When supported, the native API takes over; otherwise, the JavaScript fallback provides a comparable user experience with opacity and transform animations.

A view transitions fallback: DOMContentLoaded + requestAnimationFrame()