Access a community of over 900,000 Shopify Merchants and Partners and engage in meaningful conversations with your peers.
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.
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.).
User | RANK |
---|---|
46 | |
40 | |
22 | |
16 | |
13 |