Pleasure from working with UI animations using API transitions of common elements (part 2)

In the first part of this article, we looked at the API transitions of common elements and how we can use it for easy creation of complex transitions for different elements of UI, which usually require a large number of JavaScript code or animation library.

🚀 But what about smooth and pleasant animations of transitions between individual pages? This is probably one of the most commonly requested features over the last few years, because even with all framework, such as React and Svelte, and animation libraries such as GSAP and Framer Motion, transitions between pages are still difficult to make.

💡 In this article, we will show transitions between pages that are common in Single Page Applications, and talk about the future API transitions of common items for transitions between documents (Multi Page Application). I will also show some great examples of implementing React, Astro and Svelte from the developers community.

• 📌 API transitions of common elements allows the browser to do a lot of hard work that relates to animations, allowing us to create complex UI animations in a more structured way.
• 📌 The main part of API is a Javascript feature that takes pictures of UI before and after DOM updates and uses cross -eclipse animation:
• 📌 Next we want to say Set API to pay attention to certain UI elements on the page and follow their position and size. This is where the CSS Page-Transition-Tag label.