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.
npm install react-navigate-motionimport { 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| 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 |
| 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 |
| Properties | Description |
|---|---|
| duration | CSS animation duration time |
| ease | CSS transition timing function cubic-bezier[x1: number, y1: number, x2:number, y2: number] |
MIT License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent