Smooth transition between site pages. How to implement?

Question

JavaScript

I have long noticed that many craftsmen make interesting animations when moving to new pages of the site. Many creative agencies for example. Same examples with behance and dribbble. And this is not just a smooth fade in and out which can be easily implemented with java sc. Everything is much more complicated here. Look at an example (select any project and it will load very smoothly into a new page): redcollar.ru
How difficult is it to implement considering that the site is made on wordpress? Loading a new page in the main? Do I need to use adobe animate for such complex animations?

Answer 1

https://s-sd.ru/files/ppcontent/index.html
https://s-sd.ru/blog_studio_design/plavnaya_smena_...
Do what you want as effects %)
In theory, this is done in 10-15 lines jquery.
And the logic of this plugin is as simple as 5 cents.
1. Click on the link to follow the link.
2. The page delays the transition by remembering the link.
3. Shows the effect first, then hides the entire page.
4. Then it goes to another page.
5. And on the new page, the content is just loading smoothly.

Answer 2

There is one cool GSAP platform, with it you can animate anything and it's not difficult. Here is an example of implementation in Russian. In summary. Next, the HTML5 History Api technology is applied .
Well, then the work of the hands, you need to calculate the actions of the animation and, upon its completion, replace the browser history. Well, the page should be loaded, respectively, either immediately when the entire page is loaded or before the start of the animation via ajax.

Answer 3

Smooth transition, this is a minimum of ajax.
Not the entire page is loaded, but only the content.
For example, Jquery has the fadeIn and fadeOut functions, you can implement them in others.
You click on the link, a request is sent to load the content of the next page, at this moment the current page "fades out", the content is loaded, the "appearance" function starts. You can "balance" the time between requesting content and receiving it with the ajax-loader GIF.
If this is not done with an asynchronous request, it will turn out to be a "porridge", because the first page may go out, and the second one will still be pending, and the second one may not open immediately.
Although it can be done. Simply to a clique you hang up event "attenuation". The browser will not change the page until it receives a response from the server. And on the ready DOM of each page (or only transitions), hang the appearance of . There will be the simplest effect of a smooth transition between pages. Click - attenuation while the browser is waiting for a response to a click - transition to a new page - appearance of content. If the server processes requests quickly, the site is optimized, and the user has a fast Internet, it will look like a real one.

Answer 4

You're welcome

Answer 5

You will be surprised, but most of what looks like magic is actually cheating :)
Sergey described it correctly above. There are no complex relationships between screens, but there are simply two parts of the animation - play the first before the transition, play the second after the transition.

Answer 6

There is a library with which you can implement what you need. It's called barba.js . I did not find instructions in Russian, but there is an article in English ( link ). It seems to me that everything is clear there. Animation can be set to any. in the example - just fadeIn and fadeOut are used.