Project Documentation

Before this project, I had worked with CSS transitions and animations, but I had not used the View Transitions API. This project went beyond my current skill level because I had to learn how the browser handles old and new visual states, how JavaScript can start a same-document transition, and how CSS can control transitions between separate pages.

I also used the technology throughout the project instead of only writing about it. The page navigation demonstrates cross-document transitions, while the Demo page uses JavaScript to demonstrate a same-document transition.

Browsers Used: Chrome, Firefox, and Galaxy S24 Ultra

Testing Completed: I tested the navigation and the interactive demo and what happens when the View Transitions API is unavailable.

Sources Used:

View Transition API - Web APIs | MDN

Smooth Transitions With the View Transition API | View Transitions | Chrome for Developers

View Transitions API (single-document) | Can I Use...

Difficulties Encountered: One difficulty I encountered was figuring out how to test what would happen if the View Transitions API was unavailable, since my browser already supports it.

By changing this portion of the JavaScript:

if (!document.startViewTransition) {
updateDemo();
return;
}

To this:

demoButton.addEventListener("click", () => {

updateDemo();
return;

document.startViewTransition(updateDemo);
});

It temporarily forced the demo to behave as though the API isn't supported.

Skills gained: I gained experience using the View Transitions API and learned how CSS and JavaScript can work together to create smoother transitions between pages and content. I also learned more about browser compatibility, feature detection, and how to make sure a website still works when a newer API is not supported.