Check out what you'll be able to do here And the CodeSandbox is here: Dependencies To be able to make some transitions like those shown above, you’ll only need to install two additional dependencies: react-router-dom: Which will be used for routing between the different pages of the website. In our example, this dependency is responsible for routing between our and pages. Home About gsap: Which is one of the best and most robust tools out there for animating websites. In our case, we’ll explore just a tiny part of it, which is what will help us animate between page transitions. To install these two dependencies execute the following code in your command line: yarn add react-router-dom gsap or: npm install react-router-dom gsap Transitions First: The WHAT The first step when creating transitions is deciding what are the elements of the current page you want to animate when entering or exiting the page. In our example, we animate all the components of the page, with the exception of the navigation menu. However, you can decide to include or exclude any element you want from your transitions. This step is important because while React creates and renders components in a virtual DOM, GSAP needs to work with components that exist in the real DOM. To solve this issue we need to use , which provide a way to access DOM nodes from React. refs Let’s examine how we do this for our homepage, using as an example a single component - the header that contains the message: Welcome <div ref={div => ( .header = div)} className= > < this "home-header" Welcome! < > p </ > p /div> Specifically, the snippet is the piece of code that will allow us to access this DOM node (this will be necessary when we animate this node with GSAP). What we are doing here is basically linking this div (which originally lives in the virtual DOM) to an “actual” DOM node that GSAP can locate. We can access this DOM node calling , which is how we named the node. ref={div => (this.header = div)} this.header We do this for 3 components within the homepage of our example. These were named , and . See if you can locate them in the following code and understand what’s going on: this.header this.content this.footer < ={ => (this.header = )} className= >
  <p> !</p>
</ >
< ={ => (this.content = )} className= >
  <p> simply dummy text the printing typesetting
industry. has been the industry's standard dummy text
ever since the s, an unknown printer took a galley scrambled it to make a specimen book. has
survived only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. was
popularised the s the release sheets
containing passages, more recently desktop
publishing software like including versions .
  </p>
</ >
< ={ => (this.footer = )} className= >
  <p> , </p>
</ > div ref div div "home-header" Welcome div div ref div div "home-content" Lorem Ipsum is of and Lorem Ipsum 1500 when of type and type It not It in 1960 with of Letraset Lorem Ipsum and with Aldus PageMaker of Lorem Ipsum div div ref div div "home-footer" January 2020 div We do the same for the page. Please check the CodeSandbox to further explore how the were applied for that page. About refs Then: The HOW The next step in creating transitions is deciding how you want to animate your different components. This step is all about choosing your effects and fine tuning them. For example, you could decide you want some element to bounce for one second while another appears gradually on the screen. Well, that’s what this step is all about — choosing and fine tuning your effects. Here’s where GSAP becomes extremely handy! Let’s explore how we do this for our homepage. The first thing you need to do is create a , which, as its name indicates, is an animation timeline that lets you decide when and how you want your animations to happen. GSAP TimelineMax In our homepage we create the timeline in the following piece of code, : which needs to be within the constructor method of your class .timeline = TimelineMax({ : }); this new paused true That’s it, you’ve created your timeline! Now, we need to use it. Here, we’ll combine the created during the previous step with our newly minted . We do this using the following code: refs timeline componentDidMount() { .timeline
    .from( .header, , { : , : , : , : Power1.easeIn
    })
    .from( .content, , { : , : , : Power1.easeInOut
    })
    .from( .footer, , { : , : , : Power1.easeInOut
    }); .timeline.play();
} this this 0.5 display "none" autoAlpha 0 delay 0.25 ease this 0.4 autoAlpha 0 y 25 ease this 0.4 autoAlpha 0 y 25 ease this So, what are we doing here? First, we are grabbing our timeline and telling it that the first component that we want to show on the screen is the one referenced by , that we want to display nothing before the animation starts happening , that we want there to be a 0.25s delay before the animation begins and we want the effect to be an easing (specifically the Power1 easeIn) ease: and last but not least, that we want the animation to last for 0.5s (which is the number after ). this.header display: "none" Power1.easeIn this.header Next, we chain the following component which we want to show: . The timeline will only start this animation when the previous one is finished (this can be customized however you want, but in our example, it works this way). gives you an animation that includes an opacity transition from 0 to 1 and lastly gives you the position from where the animation starts happening. this.content autoAlpha: 0 y: 25 Lastly, we need to literally play the timeline so everything starts to happen: . If we miss this last step, nothing will happen. this.timeline.play() I highly encourage you to play with these variables and see how the animation behaves. Furthermore, I encourage you to explore the amazing easing effects library that offers. GSAP Last step: The WHEN The last thing we need to consider before creating our transitions is when we want them to happen. In our example, we want them to happen when we enter a page (to animate how the different components are displayed within the page) and whenever we exit a page (to animate how the components are withdrawn from the screen). In this example, the only way to exit a page is by clicking on the link to the other page. The entering case is fairly easy. Since React already has a method for this called ComponentDidMount. That’s why we create and play our timeline inside the ComponentDidMount method. Whenever this page is mounting, our timeline will play. Easy. The exiting case, however, is not so simple since React doesn’t offer a clean way to handle it. So we basically hack our way around it. First is the consideration of when the exiting transition should happen. As we said before, for our example, it happens whenever we navigate to a different page than the one we are currently at. Then, if we’re currently at Home, the exiting transition should happen whenever we click the About link (in our case a button) in our navigation menu. In code, this looks like this for our homepage: <header className= > <p>Home</p> <button
    className= onClick={e => .changePage(e, )}
  > < header> "navigation" < = > button className "nav-item" </ > button "nav-item" this "/about" About < > p </ > p /button>

</ This header component represents our navigation menu, which has two button components: Home and About. Since this is the code for our homepage, whenever we click the Home button, nothing should happen. However, whenever we click the About button two things should happen: 1) the exit transition should kick in and 2) after the exit transition is done, it should route us to the About page. This two things happen in the changePage function, that is called whenever the About button (link) is clicked . The following is the code for the changePage function: onClick={e => this.changePage(e, "/about")} changePage = {
  e.preventDefault(); .timeline.reverse(); timelineDuration = .timeline.duration() * ;
  setTimeout( { .props.history.push(destination);
  }, timelineDuration);
}; ( ) => e, destination this const this 1000 => () this As said before, two things are happening here: The exit animation is kicked off. In our case we decided to just reverse the timeline: , but you could easily craft your own exit animations using a different timeline. this.timeline.reverse() After the exit animation is done, which is captured by the constant , we use the history object to jump from the current page to the about page: — in this case, destination is “/about”, which corresponds to the route of our About page. timelineDuration react-router-dom this.props.history.push(destination) Routing won’t be explored here since it falls out of the scope of this article. However, feel free to leave any questions regarding that part in the comments section below. Thank you for reading! I hope this was useful! Previously published at https://levelup.gitconnected.com/animated-page-transitions-with-react-and-gsap-538f55fe2b2b

Chain

Read My Stories

Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

Build Smooth Page Transitions with React and GSAP

Too Long; Didn't Read

Coin Mentioned

@joerlop

RELATED STORIES