How to make an animated page transition?

Question

JavaScript

There are 4 main pages, you need to hang a transition on them like here
tympanus.net/Development/PageTransitions (move animations)
Unfortunately, the lesson does not teach how to enable ajax and do it with pages, not containers.
Played around with smoothState.js , hooked up the slideRight + slideLeft animation. It looked similar, but there is a huge white strip between the transition. I came to the conclusion that content substitution is not enough, you need to load two pages at once in advance so that the transition is possible, but unfortunately I did not find a way to do it there.
I put the site on modx. How to do it? What to do? Thanks in advance.

Answer 1

why not put everything in one html, so that each page is a screen-high block, and then you can do an animated scroll instead of moving to another page

Answer 2

I agree with the user above, you need to display all resources on the main page using pdoResources.
And then you can already do any animation. But for SEO, of course, it will be worse than pagination.

Answer 3

If a new page is formed from the data received by ajax request, then before starting the transition animation, you need to prepare a new page: get the data with Ajax, form a new page in a separate block, start the transition animation. After that, you may have to erase the block with the previous page.
Such transitions are easier to do in single-page web applications.
Another difficulty may arise with some elements that are common to both pages (header, sidebar, ...).