Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/siteation/experiment-magento2-cross-document-view-transitions
Experiment for Cross Document View Transitions on Magento 2
https://github.com/siteation/experiment-magento2-cross-document-view-transitions
demo experiment hyva magento2 siteation-experiments
Last synced: 3 days ago
JSON representation
Experiment for Cross Document View Transitions on Magento 2
- Host: GitHub
- URL: https://github.com/siteation/experiment-magento2-cross-document-view-transitions
- Owner: Siteation
- License: mit
- Created: 2023-11-11T15:20:00.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-17T14:33:17.000Z (5 months ago)
- Last Synced: 2024-06-17T15:56:22.150Z (5 months ago)
- Topics: demo, experiment, hyva, magento2, siteation-experiments
- Homepage: https://siteation.dev
- Size: 15.6 MB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Siteation Experiment - Magento 2 Cross Document View Transitions
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.
## Try it your self
1. **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).
```css
@view-transition {
navigation: auto;
}
```
2. **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:**
```php
style="view-transition-name: product-= $productId ?>"
```
**Main Product Gallery:**
```php
style="view-transition-name: product-= $block->getProduct()->getId() ?>"
```
## Experiment, Explore, and Refine
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.
## Additional Resources
- 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.