Is it possible/advisable to make animated transitions on the web?

Question

Animation

How problematic from a technical point of view will it be to implement animated transitions on the web (any kind, well, for example, as in the examples on the links: https://page-transitions.com/ (top menu) or https://dribbble.com/ shots/3124800-Rise-Course-Overview )?
The essence of the transition is a smooth, animated change of interface screens, and not when everything just disappears and then appears out of nowhere.
Interested in whether it is possible to create a relatively complex portal with such transitions? In particular, will the page load normally?
What do you think is the best way to implement this?
I am writing a paper on this topic, I don’t understand the technical side of the issue yet, so for a start I decided to ask a question here. I will be very grateful for the answer! :)

Answer 1

Cool example, thanks, I saved it to my bookmarks.
It strongly depends on the technologies that are used in the project. If this is a standard server rendering, then this will not work. In this case, the isomorphic nuxt.js framework is used, which uses client rendering when clicking on links within the project, and server rendering when the page is loaded "directly".
It is due to client rendering that you can store globally defined data and make such interface changes.
There are 2 pitfalls:
1. Beautiful animations are always difficult and time consuming for those who do not work closely with them.
2. Almost all information is taken from the server, which means that when you go to new pages, you must constantly make requests that run for a certain time. At this point, it is advisable to insert some kind of stubs in the interface, which will then be carefully replaced with new content.

Answer 2

If you want to give it a try, try barba.js , you can use it to make normal page transitions (and you don't need to do any SPA). As tools for animation (if you don’t know how to write or don’t want to write yourself), I can advise: tweenmax and other solutions (which you can find there).

Answer 3

This kind of animation is designed to work without reloading the page. If this is some kind of content site, then there will be difficulties with preparing the site for SEO. Hence, the price tag for development will greatly increase. I don't know if anyone is ready to overpay for beautiful animations, and then overpay for SSR. And then another year to catch bugs)

Answer 4

In the example, the first link is just a slider, only so well-designed. It’s not difficult, it’s just that the slider was used awesomely with creativity, implemented in vyuzhs (you can even see it by the favicon), and the data is loaded dynamically.
(By the way, they talk about this project here: https://css-tricks.com/native-like-animations-for-...
The second example is how uix designers have fun (it's just an animation without real layout, although it's also possible to implement this). It is useful for the wow effect. For everyday sites, it’s better not to - precisely because such an animation will load your eyesight more, and it will take too much attention for the perception of content - that is, usability will fall, and the corresponding indicators - delay time on the page, time spent on the site, number of visited pages, etc.
Regarding the "technical side" - this is now being implemented with the help of javascript frameworks (nodes, view, react and angular), and css is active at the front.