Angular dynamic page transitions for better UX
I’m a believer that adding a couple of thoughtful animations in a web app can drastically improve user experience. In native apps we take it for granted, pages sliding in from right, left or from the bottom all have different purposes and meanings to help and support the user. For some reason it’s less common in web development.
This post assumes some basic knowledge about Angular animations, and if you want to read more about it I recommend:
Angular — Supercharge your Router transitions using animations by Gerard Sans
I have a side project built with Angular (6) and it consists of just a few pages:
- Landing page
- Search page (search for persons with given competences)
- Detail page (view details of one specific person, check cv, video or picture, print etc)
I wanted to add meaningful animations when going from on page to another, and depending on if the user goes up or down in the page hierarchy (backward or forward in the browser) use different animations. URL paths of each page follows classic structure when building a SPA and that simplifies the task to programmatically determine which animation to use:
- Landing page url path: /
- Search page url path: /persons
- Detail page: /persons/:personId
A lot of the resources online however, on Medium and Stack Overflow, regarding Angular animations on route level are not setup for this exact use case. They focus more on either specifying one generic animation for all page transition…
…or hard code transitions between specific pages
What I want is a function to dynamically determine if a user is digging down into details of some specific person or going back to the search page.
There are a few different cases to cover:
- First page loaded, no matter if it’s Landing page, Search page or Details page should fade in.
- Going down in page hierarchy is usually like reading a book, you go forward in browser history and new stuff enters from the right (at least in the right-to-left part of the world). Example is going from Landing page to Search page or from Search page to Detail page should have next page slide and fade in from right and previous page should at the same time fade out.
- Going up in page hierarchy should be the opposite, new stuff enters from the left and your considered to go backwards in the browser. Example is going back to Search page from Detail page should have next page slide and fade in from left and previous page should at the same time fade out.
- Section changes is not going either up or down in page hierarchy but instead changing on the same level. The application right now is too simple to have that, but imagine going from Search page (/persons) to a page on same level, e.g. an Admin page (/admin) or Planning page (/planning) should have a fade in of next page and fade out of previous page.
So, the code to get this working involves a few different pieces:
@angular/animations and add
@angular/platform-browser/animations to the app module. (By the way, you don’t need a polyfill for Web Animations API anymore since Angular 6 will fallback to use CSS keyframes)
Create animations for initial, forward, backward and section changes.
Update the template that has the
router-outlet to call a function holding the logic for determining which animation to use.
Finally, the last puzzle piece, use previous url path and next url path to determine if user is going backward, forward or changing section.
The end result:
Ps 1. If adding deeper levels this example needs to be extended, read more here.
Ps 2. Having worked mostly in React world last few years this was…. eh, complicated to get running. A little bit too complicated than I think it should be. However, React Transition Group is far from the easiest component to get working either.