Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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.).
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025