Animated routing FTW
npm i -D liquid-route
This is a collection of route element and animation objects based on element.animate
. Which will make it super easy for you to do animated routing.
This mainly consist of the following animation objects
liquid-route
is the route component which you would need to use in order animate between routes. It takes a prop named animator which is a animation object
import Router from 'preact-router';
import LiquidRoute, {FadeAnimation, PopAnimation} from 'liquid-route';
import 'liquid-route/style.css';
import Home from './Components/Home/Home.jsx';
.
.
.
return (
<Router>
<LiquidRoute animator={FadeAnimation} path="/" component={Home}/>
<LiquidRoute animator={PopAnimation} path="/profile" getComponent={()=>{
return System.import('./Components/Profile/Profile.jsx').then(module => module.default);
}}/>
<LiquidRoute animator={PopAnimation} path="/profile/:pid" getComponent={()=>{
return System.import('./Components/Profile/Profile.jsx').then(module => module.default);
}}/>
</Router>
);
Animator
object is a javascript object which exposes two methods
getEntryAnimation
- returns animation object used to play entry animation of a routegetExitAnimation
- returns animation object used to playexitentry animation of a routeBoth of the above ☝ methods return an object having the following properties
a. animation: array of animation object used to play the entry/exit effect
b. options: an object of options taken by element.animate
api.
According to MDN Web Animation is still in working draft status and only a few browsers support it, however there's a polyfill might come in handy.
While some basic animator objects come with the bundle, here is where the most of the transition inspiriation is drawn from.
Send PR if you wanna add new animators in the repo, happy to include 😊.
In order for the transitions to work, please declare all routes as liquid-route
.
P.S. Tried and tested most of the animations are easily doable with this route element.