feat: add page transitions with view transitions api

[jawinn]

Summary of changes

Add cross-document view transitions

Add a page transition animation that fades the page in and out, using CSS and the cross-document View Transitions API. Included as a progressive enhancement for supported browsers (Chrome, Edge, Safari).

Timings were adjusted based to try and find a happy medium where the fade feels less like the page is flashing (too fast), while also not feeling like a loader that is preventing access to the next page (too slow). Further timing and easing suggestions are welcome.

The effect is disabled when prefers-reduced-motion is enabled, since this is a large-scale (full screen) effect that transitions fairly quickly.

Browser Support:

• Supported: Google Chrome (126+), Microsoft Edge (126+), and Apple Safari (18.2+)
• In Progress: Mozilla Firefox is actively working on implementation (available behind flags).

Relevant Links

• Story: ADBLABS-171

Test URLs:

• Before: https://main--adobe-labs-website--adobe.aem.live/
• After: https://feat-fade-transitions-fade--adobe-labs-website--adobe.aem.live/

Checklist

Validation

1. Make sure all PR checks have passed.
2. Pull down the branch and run locally or view on the PR testing link.
3. Verify the implementation against the design and story requirements.

Validation steps

• Navigate between pages in supported browsers. Observe page fade in and fade out.
• Tested in light and dark mode.
• Effect is disabled when reduced motion preference turned on.

---

Browser Testing

We should aim to support the latest version of the listed browsers. For older versions or other browsers not on the list, content should be accessible, even if it doesn't completely match the designs.

Developers should test as they work in the browsers available on their machines. If they have access to other devices to test other browser/OS combinations, they should do that when possible.

Blocks and pages should undergo comprehensive testing to ensure they work as expected in real-use scenarios. Standard testing during pre-production should include at least these browsers.

• ❌ Firefox
• Chrome
• Safari
• Edge

Dark mode and light mode

Most pages support both dark and light mode, based on prefers-color-scheme.
Changes that affect the frontend should support both color schemes.

• Frontend changes have been tested in both light mode and dark mode.

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run all PSI checks
• Re-run failed PSI checks
• Re-sync branch

Commits

• 5da74c4 ✅ (latest)
• b6702b0 ✅
• f3b29ca ✅

[aem-code-sync]

	Page	Scores	Audits	Google
📱	/
🖥️	/