React SPA Routing Transition With Barba.Js Effect

Barba.js provides a smooth fluid transition between the website’s page and within a short period of time, it has built a good reputation in the market with more than 8K hits on their source code. Yet, The hard part is to integrate it with modern frameworks. As we all know, in today’s world the craze for SPA using frameworks like React/Vue has only increased. The design is made up of a single page using React/Vue works smoothly and provides a native feel with higher UX. The SPA created with these frameworks can provide all sorts of virtual routing without changing the HTML structure but it rearranges the components. To achieve the effect of transitioning between the route change in React is super interesting as we can leverage the lifecycle hooks to produce the same effect as Barba.js without using the package.

In this article, the Single page React application is designed where the routing is achieved using ‘react-router’ and the transitions are produced with ‘GSAP’. The app is constructed using create-react-app setup where additional discrepancies i.e. react-router and GSAP are installed. The simple folder structure looks like below snippet below where two stateless components, Contact and Home are present which is being operated by App.js.

App.js
  - Home Component (Route= "/")
  - Contact Component (Route= "/contact")

These components are stateless, providing leverage of using two critical hooks ( useRef/useEffect ) to animate while mounting and removing the component. The typical HTML structue for each component consists of the first layer i.e. the loading screen, and the entire child components/ HTML structure as a second layer. So, while entering the component using useEffect hook, the loading screen will be animated with GSAP timeline, and the return statement in useEffect will be useful to provide us an enhanced experience of animation while unmounting the component from DOM tree.

The simple steps to build the transition are as below:

1. Add references to HTML elements that will be transitioning.
2. Set up a timeline in useEffect hook for the transition.
3. The Callback of useEffect will be playing the transition which will be effective while the component is being removed.

GSAP Timeline for Sliding Effect

Timeline is a powerful class providing all features of setting up a sequential animation for multiple elements. Here, using a timeline, the sliding animation can be achieved with the help of sequential execution of below 4 steps.

• Step A: Initially, the width for the loading screen is set to 0 in CSS which will be transitioned to 100% in 1s thus, giving an effect of closing the curtain.
• Step B: After that, a delay of .3s to provide a halt for producing the effect of a closed curtain.
• Step C: Next animation is fired and it will take the same screen to the left 100% giving an
• opening effect of the curtain. At the end of the animation, the left value of the screen is set to some negative % to be on safer side.
• Step D: Simultaneously, Tweenmax is also implemented with a delay of 2s from the starting point to display the main body part of the component with a fade-in effect along with that, it activates pointer-events at the same time to mitigate the overlapping.

While destroying the component, using the callback function of useEffect, it will undo the opacity and remove the pointer-events.

No more theory, Let’s code :)

ShyamBhuptani/React-Barba-Effect

Note: To implement this transition in Stateful components, the entire setup needs to be fit in two life-cycle methods namely componentDidMount and componentWillUnmount.

You can run the provided demo application or try to implement it with your current React application for a smoother user experience. Feel free to connect with me on social media, I always look forward to receiving feedback.

Thanks for reading and Happy coding !!!

Shyam Bhuptani