react-use-animation
Easy way to animate page transition using react-router-dom.
Install
npm install --save react-use-animation
Usage
Wrap your entire app with AnimationProvider component:
import React from 'react'import ReactDOM from 'react-dom'import App from './App'import BrowserRouter from 'react-router-dom';import AnimationProvider from 'react-use-animation'; ReactDOM
Use Link components to navigate (they behave just like normal react-router-dom links):
import React from 'react'import Link from 'react-use-animation'; const Navigation = return <nav> <Link ='/home'> <Link ='/products'> <Link ='/about'> <Link ='/contact'> </nav>
Inside routes you want to be animated, use "useAnimation" hook:
import React from 'react'import useAnimation from 'react-use-animation'; const PageA = return <div> PAGE A </div>
Example with GSAP animation library:
import React from 'react'import useAnimation from 'react-use-animation';import gsap from 'gsap'; const PageA = return <div ='pageA'> PAGE A </div>
Optional, using return function from useAnimation hook:
import React from 'react'import useAnimation from 'react-use-animation';import gsap from 'gsap'; const PageA = const redirectNow = return <div ='pageA'> PAGE A </div>
License
MIT © bartlomiejwiejak