This project explores the Cross Document View Transitions API to create smooth and visually appealing transitions between views within your Magento 2 store.
By leveraging this experimental browser feature (currently only available in Chrome), you can enhance user engagement and provide a more delightful shopping experience.
-
Include CSS: Add the following CSS to your main CSS file to enable view transitions for navigation (and disable them for users with reduced motion preferences).
@view-transition { navigation: auto; }
-
Apply Inline Styles: Create smooth product image transitions by adding the following inline styles to each product list item and the main product gallery section:
Product List Item:
style="view-transition-name: product-<?= $productId ?>"
Main Product Gallery:
style="view-transition-name: product-<?= $block->getProduct()->getId() ?>"
This example demonstrates the basic setup for cross-document view transitions using the View Transitions API.
You can experiment with different animation properties (like duration, timing-function, etc.) within your CSS to refine the transition behavior and create a unique experience for your store.
- Introduction to View Transitions: https://developer.chrome.com/docs/web-platform/view-transitions
- Explainer for Cross Document View Transitions: https://github.com/WICG/view-transitions/blob/main/cross-doc-explainer.md
- CSSWG View Transitions Documentation: https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition
- Google IO Talk: https://youtu.be/eY6C_-aDdTo?si=quYRCJ3M9446ZMlx
- Chrome Release 126 article: https://developer.chrome.com/blog/new-in-chrome-126#cross-document-transitions
- Chrome Docs on cross-document view-transitions: https://developer.chrome.com/docs/web-platform/view-transitions/cross-document
Disclaimer: Remember that this is an experimental feature, and browser support might change in the future. Consider using feature detection or polyfills if you plan to integrate this into a production environment.