AJAX page transitions in Sage 9

sage
1

I am looking for general info or words of warning here. I want to have seamless page transitions, and there’s a lot of tools and Wordpress plugins out there which will use AJAX requests to do just that.

Advanced AJAX Page Loader
Cody House’s Animated Page Transitions

My biggest concern is Webpack and how the module system will work (or not work). I’m still a beginner to Webpack, but it seems that page specific JS and event binding is going to be a problem here. Has anyone seen this done well using Sage, or with web pack in general? I’m hoping to stay within Sage as opposed to building an Angular/React app.

1 Like
2

You can try SmoothState.js, it’s pretty easy and clean. https://github.com/miguel-perez/smoothState.js

Add it to your project, make a div wrapper with a specific id and some css for animation and JS code and that’s probably it. There are some examples as well. No need to use angular/react for this.

Don’t really know what you mean with Webpack as it’s just a build system for development and it’s not used on your production site at all.

3 Likes
3

http://barbajs.org/ is another option.

edit: the author of Barba.js [notes some comparisons between SmoothState and Barba] (https://www.reddit.com/r/web_design/comments/4m9ie4/barbajs_create_smooth_transition_between_your/d3ub15h/) on reddit.

5 Likes
4

So far the site is essentially a node app running in the browser on the home page. That means I cache the wp loop and just inject data React style (minimal DOM manipulation) when my event handlers fire.

I think I’ll need page transitions any way, since I can’t route all page requests to the home page (and I don’t want to). This means if you follow a link to a particular post and then want to navigate the site, I’ll need to use page transitions. I’ll post when it’s done.