Using subtle animations for page transitions in single page apps?

1. Can I use shared element transitions?
2. Can I use framer motion with next JS?
3. What is page transition?
4. What is shared element transition?

Can I use shared element transitions?

Shared Element Transitions API is currently supported only in Chrome version 104+ and Canary with the document-transition flag enabled. Examples will be accompanied by a video, so you can easily follow along with the article if you don't have the required browser installed.

Can I use framer motion with next JS?

Page transitions can be built in just about any frontend framework or technology, but in this demonstration, we'll use Next. js to provide the cue for when pages transition to trigger the animation and Framer Motion to actually perform the page transitions.

What is page transition?

Page Transitions can be an aesthetic improvement for your website visitors. They may provide a smoother flow between pages or on page loading. They may also be used to help give time for video backgrounds or other assets to load before display.

What is shared element transition?

A shared element transition determines how a view that is shared between two fragments moves between them. For example, an image displayed in an ImageView in fragment A transitions to fragment B once B becomes visible.