Skip to content

Latest commit

 

History

History
49 lines (32 loc) · 2.27 KB

File metadata and controls

49 lines (32 loc) · 2.27 KB

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.

preview

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).

    @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:

    style="view-transition-name: product-<?= $productId ?>"

    Main Product Gallery:

    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

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.