React-page-animations NPM

react-page-animations

React-page-animations is a lightweight, elegant way to add page transitions to your create-react-app, built on Framer motion. react-page-animations comes with customizable props that you can use to alter the transition animation styles, and works with any react app using react-router, or react-router-dom. Get started with the installation and quickstart guide below.

Installing

npm install react-page-animations

Quickstart

import { Link } from 'react-router-dom';
import { AnimatedPage } from 'react-page-animations';

export default function HomePage () {
    return <AnimatedPage initialOpacity="0" finalOpacity="1">
        <h1>home page</h1>
        <Link to="/page1">Page 1</Link>
        <Link to="/page1">Page 2</Link>
    </AnimatedPage>
}

Here, we are wrapping our home page which the AnimatedPage component, which provides page transition animations. Then, we are adding the props initialOpacity="0", and finalOpacity="1", which is the simplest way to add a fade transition.

Customization

Prop	Description
initialOpacity	opacity on first page load
finalOpacity	opacity once page is done loading
exitOpacity	opacity as you click off page
initialX	X movement on first page load
finalX	X movement once page is done loading
exitX	X movement as you click off page

To customize the transition animation style, pass props to the AnimatedPage component wrapping your page. "Inital" refers the state of the page when you first load to it, "final" refers to the state once the page has been loaded, and "exit" means the state as you click off of a page.

Tip: to create the smoothest fade transition, add initialOpacity="0", finalOpacity="100", and exitOpacity="0" to all your AnimatedPages.
Tip: to create a horizontal jiggle transition, add initialX="100", finalX="0", and exitX="-100" to all your AnimatedPages.

Contributing

Everyone is welcome to make a contribution to react-page-animations. If you are interested in contributing to this project, start with the Contributing Guide.