Repository files navigation

  npm i -D liquid-route

This is a collection of route element and animation objects based onelement.animate. Which will make it super easy for you to do animated routing.

This mainly consist of the following animation objects

1. FadeAnimation: Next route will fade in and current will fade out.
2. PopAnimation: Next route will pop from center and current route will implode.
3. SlideLeftAnimation: Next route will slide from right while current one slides to left.
4. PushNSlideAnimation: Routes will scale down and slide.
5. AppearFromBottomAnimation: Next route will fade and appear from bottom and sit on top of current route.
6. AppearFromRightAnimation: Next route will fade and appear from right and sit on top of current route.

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

importRouterfrom'preact-router';importLiquidRoute,{FadeAnimation,PopAnimation}from'liquid-route';import'liquid-route/style.css';importHomefrom'./Components/Home/Home.jsx';...return(<Router><LiquidRouteanimator={FadeAnimation}path="/"component={Home}/><LiquidRouteanimator={PopAnimation}path="/profile"getComponent={()=>{returnSystem.import('./Components/Profile/Profile.jsx').then(module=>module.default);}}/><LiquidRouteanimator={PopAnimation}path="/profile/:pid"getComponent={()=>{returnSystem.import('./Components/Profile/Profile.jsx').then(module=>module.default);}}/></Router>);

Animator object is a javascript object which exposes two methods

1. getEntryAnimation - returns animation object used to play entry animation of a route
2. getExitAnimation - returns animation object used to playexitentry animation of a route

Both of the above ☝ methods return an object having the following propertiesa. animation: array of animation object used to play the entry/exit effectb. options: an object of options taken byelement.animate api.

According toMDN Web Animation is still in working draft status and only a few browsers support it, however there's apolyfill 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 asliquid-route.

P.S. Tried and tested most of the animations are easily doable with this route element.