How to make page transition animation?

Question

Web development

There is a page with a grid of images. When you click on the image, a smooth transition to the page with a detailed description is carried out (the Image seems to remain in place (sometimes increasing), and the content around it changes). I think many have seen such a transition, it became curious how it can be implemented. For example, on rekat, but if there are examples in normal html, it’s also normal, the main thing for me is to catch the principle.

Answer 1

React is just a stateful tool.
Here you have state 1 - this is a page with an image grid.
When clicked, you change the state to 2 - this is the page with the content of this image.
For the animation logic itself, you can use the appropriate css properties, or use js-react libs for animations, such as framer.motion