prateekbh/liquid-route

Animated routing FTW

Liquid-route

  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

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.

Sample

Route element

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

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 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.

Browser Compatability

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.

Inspiration

While some basic animator objects come with the bundle, here is where the most of the transition inspiriation is drawn from.

You creative?

Send PR if you wanna add new animators in the repo, happy to include 😊.

Note

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.

liquid-route's Issues

Animation is reversed the second time it runs

I'm curious why you added the reversed animation on exit animation finish: https://github.com/prateekbh/liquid-route/blob/master/Components/LiquidRoute/LiquidAnimator.jsx#L37

It is causing a bug for me where my route transition is messed up/reversed every other time it runs. I removed the reverse animation logic in componentWillLeave and it fixes the issue. Curious if anyone else is seeing this as it seems to be a pretty big bug. I'll go ahead and submit a PR.

Readme typo

Hello,

Firstly, thank you for providing this package !

The readme contain a typo.

This mainly consist of the following animation objects

1. FaderAnimation: Next route will fade in and current will fade out.

Should be FadeAnimation

Undefined vnode?

Hi.

I'm trying to wrap <LiquidRoute> in a custom component to handle authorisation:

  <Router>
    <AuthRoute>
      <LiquidRoute animator={FadeAnimation} path="/test" component={Test} />
    </AuthRoute>
  </Router>

AuthRoute looks like this:

import { h, Component } from "preact"
import { route } from "preact-router"
import { STORAGE_USER } from "../conf.js"

class AuthRoute extends Component {
  constructor() {
    super()
  }

  componentWillMount() {
    if (! localStorage.getItem(STORAGE_USER)) {
      route("/")
    }
  }

  render(props) {
    return (
        <div>{props.children}</div>
    )
  }
}

export default AuthRoute

This results in the following error in Firefox:

TypeError: vnode.attributes is undefined
rankChild
webpack-internal:///./node_modules/preact-router/dist/preact-router.es.js:86:2
prepareVNodeForRanking
webpack-internal:///./node_modules/preact-router/dist/preact-router.es.js:69:15
filter self-hosted:318:17 getMatchingChildren
webpack-internal:///./node_modules/preact-router/dist/preact-router.es.js:315:10
render
webpack-internal:///./node_modules/preact-router/dist/preact-router.es.js:335:16
renderComponent
webpack-internal:///./node_modules/preact/dist/preact.mjs:526:14
renderComponent
webpack-internal:///./node_modules/preact/dist/preact.mjs:554:5
setComponentProps
webpack-internal:///./node_modules/preact/dist/preact.mjs:475:4
buildComponentFromVNode
webpack-internal:///./node_modules/preact/dist/preact.mjs:641:3
idiff
webpack-internal:///./node_modules/preact/dist/preact.mjs:252:10
diff
webpack-internal:///./node_modules/preact/dist/preact.mjs:213:12
render
webpack-internal:///./node_modules/preact/dist/preact.mjs:708:10
<anonymous>
webpack-internal:///./src/index.js:123:2
./src/index.js
<snipped>

`LiquidRoute` breaks the normal scrolling behavior

When routing, the scroll position of the new route seems to be the one from the previous route.
For example if I have a List of 500 articles and I scroll to the #300 and route to the article details the scroll position is a the bottom of the page.

Note
I'm using preact-mdl LayoutContent, this bug may only be present in this case.

Workaround for now:

  handleRouting = event => {
    this.currentUrl = event.url
    const content = document.querySelector('.mdl-layout__content')
    if (content) content.scrollTop = 0
  }

Preact X support?

I am having problems using liquid-route with project upgraded from Preact 8 to Preact X;

When visiting /login, nothing is rendered with this:
<LiquidRoute animator={PopAnimation} path="/login" component={Login}/>
but changing it to not use liquid-route, like this, works:
Route path="/login" component={Login} /> or <Login path="/login"/>

liquid-route worked perfectly in Preact 8, but not in Preact X.
I have seen that you have deprecated AsyncRoute, so what is the fate of LiquidRoute?

Browser compatibility

According to https://developer.mozilla.org/en-US/docs/Web/API/Element/animate#Browser_compatibility The element.animate is not yet supported by most browsers.. does that imply this module also might not work cross different browsers..? (if so maybe it's worth mentioning it in the readme)