Liquid, JavaScript, themes, sales channels
Join us March 21 for an AMA on planning your 2023 marketing budget with 2H Media co-owners, Matt and Aron
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 |
---|---|
21 | |
19 | |
13 | |
12 | |
8 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023