Element animation?

Question

JavaScript

On the site torex.ru
in the "Series of doors" block, when you hover over the blocks, they smoothly move apart.
I'm digesting the logic.
How to make the elements not go beyond the borders of the block, but narrowed?

Point to the block
Define the previous elements and the next. What formula to lay down so that they decrease in width in proportion.

Answer 1

What do not you understand?
The elements (each of the doors) are stacked on top of each other with the appropriate z-index.
On hover, it fires like transform: translate3d(48px, 0px, 0px); => transform: translate3d(92px, 0px, 0px);
They do not narrow at all, but simply overlap each other.
The shift is only horizontal.
Nothing gets out anywhere, because. the parent has overflow: hidden;.
Coordinates are first calculated by default, then changed by hover.