Build Smooth Page Transitions with React and GSAP

Too Long; Didn't Read

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. 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. We use refs, which provide a way to access DOM nodes from React.