react-navigate-motion
Overview
A programmatic page transition with animation.
This library uses react-router-dom's navigate hook and other frameworks routing functions.
The single component performs the unmount and next page initial mount animations, motion is always returns to the initial style.
Installation
npm install react-navigate-motion
Get Started
import { NavigateMotion } from "react-navigate-motion";
import { useNavigate } from "react-router-dom";
const Link = ({ href, children }) => {
const navigate = useNavigate();
const exit = { opacity: 0, transition: { duration: 0.5 } };
const entry = { opacity: 0, transition: { duration: 0.5 } };
return (
<NavigateMotion href={href} routing={navigate} exit={exit} entry={entry}>
{children}
</NavigateMotion>
);
};
export default Link;
NavigateMotion(href and routing is require)
Properties | Description |
---|---|
href | Pass the Internal page path for prefetching and page transitions this is used to router methods arguments and <a>
|
routing | Pass the programmatic page transitions hooks |
exit | Object defining the properties for the exit animation |
entry | Object defining the properties for the entry animation |
scroll | Controls whether the page scrolls to the top upon navigation |
prefetch |
prefetch={false} is starts prefetching when the link is pressedprefetch={true} is prefetches when the Link element in the viewport |
exit and entry Object(all are optional)
Properties | Description |
---|---|
opacity | CSS opacity |
blur | CSS filter blur |
scale | CSS transform scale |
x | CSS transform translateX |
y | CSS transform translateY |
rotate | CSS transform rotate |
rotateX | CSS transform rotateX |
rotateY | CSS transform rotateY |
rotate3d | CSS transform rotate3d [x: number, y: number, z: number, a: string] |
transition | Object defining the properties for the duration time and ease |
transition Object
Properties | Description |
---|---|
duration | CSS animation duration time |
ease | CSS transition timing function cubic-bezier[x1: number, y1: number, x2:number, y2: number] |
License
MIT License.