What technologies and tricks were used to create the front-end of the pochta.ru main page?

Question

css

When I go to the main https://pochta.ru/ , I see approximately the following effects:
1) overall fadein somewhere around 600 ms?
2) the central part is unclenched, but not in the old way animation height, but apparently animation transform: scaleY (0) by transform: scaleY (1)?
3) a basement flies from below, apparently a simple top animation?

Answer 1

It is not used by mail, but you may need a set of ready-made css animations
https://daneden.github.io/animate.css/

Answer 2

Here are some more cool animation examples
tympanus.net/Development/DialogEffects/val.html
tympanus.net/Development/ButtonComponentMorph/inde...
tympanus.net/Development/NotificationStyles/growl-...
there are links "BACK TO THE CODROPS ARTICLE", these are links to instructions

Answer 3

It simply removes classes for elements (see main.js ):

$(".header-container").removeClass("header-container--hidden"),
$(".footer-container").removeClass("footer-container--hidden")

And all animation is done with CSS ( style.css ):

html.rpst-portal.aui .header-container {
  width: 100%;
  background: white;
  position: relative;
  opacity: 1;
  -webkit-transition: opacity 500ms ease-out;
          transition: opacity 500ms ease-out;
  border-bottom: 1px solid #e6e6e6;
  z-index: 2;
}

html.rpst-portal.aui .header-container--hidden {
  opacity: 0;
  -webkit-transition: none;
          transition: none;
}

html.rpst-portal.aui .footer-container {
  width: 100%;
  opacity: 1;
  -webkit-transition: opacity 500ms ease-out 0.2s, -webkit-transform 500ms cubic-bezier(0, 0.9, 0.1, 1) 0.2s;
          transition: opacity 500ms ease-out 0.2s, transform 500ms cubic-bezier(0, 0.9, 0.1, 1) 0.2s;
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
  padding-top: 42px;
}

html.rpst-portal.aui .footer-container--hidden {
  opacity: 0;
  -webkit-transition: none;
          transition: none;
  -webkit-transform: translate(0, 150px);
      -ms-transform: translate(0, 150px);
          transform: translate(0, 150px);
}

I think everything else is done the same way.
Used "trick", by the way, not the most successful. Since if JavaScript is disabled or does not work for any reason, then the user will see a blank page. It would be more correct to implement all this only due to CSS animations without using JavaScript.

Answer 4

This is a trendy combination of React, jQuery and jQuery plugins.