AJAX transitions across whole site

[kacpergalka]

Hello,

What's the best/easiest approach to implement AJAX transitions with animations between shopify templates - pages/colections/products without reloading the site? 

I aim to achieve this level of front end interactions: https://www.jacquemus.com/ 

Basically I would love to call some JS to fetch the content and have before/after function to implement simple animations using js/css.

For example at Wordpress it is as easy as calling a smoothstate plugin function on a container and utilize callback functions:

var settings = { 
            ...
            onStart: {
                duration: 280, // ms
                render: function ( $container ) {
                    $container.addClass( 'slide-out' );
                }
            },
            onAfter: function( $container ) {
                ...
                $container.removeClass( 'slide-out' );
            }
        };
 
        $( '#page' ).smoothState( settings );

Is there anything like this for Shopify?

Thanks, I will appreciate any advice on how to tackle this.

[tokant]

Shopify itself does not provide the functionality. So you'd need to implement a solution with pure JavaScript or via a library (smoothstate, barbajs, etc.).