The problem If you want to transition between pages, your current option is to fetch the new page with JavaScript, update the URL with pushState, and animate between the two. Having to reimplement navigation for a simple transition is a bit much, often leading developers to use large frameworks where they could otherwise be avoided. This proposal provides a low-level way to create transitions while maintaining regular browser navigation.
You know how some sites and web apps have that neat native feel when transitioning between two pages or views? Sarah Drasner has shown some good examples and even a Vue library to boot.These animations are the type of features that can turn a good user experience into a great one. But to achieve this in a React stack, it is necessary to couple crucial parts in your application: the routing logic and the animation tooling.Let’s start with animations. We’ll be building with React, and there are great options out there for us to leverage. Notably, the react-transition-group is the official package that handles elements entering and leaving the DOM. Let’s explore some relatively straightforward patterns we can apply, even to existing components.
Complete, flexible, extensible and easy to use page transition library for your web. Looking for what's new in v2? Head over here.Still wanna check v1? Get it from npm with npm install swup@1.9.0 or check old docs here.
When you navigate around apps on your phone, there's usually some sort of transition, from a simple fade or slide from one screen to another, to more complex transitions that move different elements independently:
jakearchibald/navigation-transitions
The CSS transitioncancel event is coming to Chrome and Safari | Web Platform News
Animating Between Views in React | CSS-Tricks
Parallax Depth Cards
swup/swup: Complete, flexible, extensible and easy to use page transition library for your web.
Animista
Smooth and simple page transitions with the shared element transition API - Chrome Developers