search

rgrempel / elm-route-url

Router for single-page-apps in Elm
http://package.elm-lang.org/packages/rgrempel/elm-route-url/latest
MIT License
196 stars 16 forks source link

Provide animation or place to animate while transitioning from one page to another #11

Closed kunjee17 closed 8 years ago

kunjee17 commented 8 years ago

Hi,

First of all this is the one full fledge routing library I found. Having all the thing. Thanks for great work. Only part I feel is it will be great if there is a way to inject animation for transitioning from page to page.

It is just a case of beautification but a good to have to compete other part like react and angular.

Thanks for great work. :)

rgrempel commented 8 years ago

I'll think about how to do that. In principle, what a URL change generates (in this scheme) is a list of actions, so you could theoretically make those actions perform an animation ... but perhaps there is something the library can do to make that easier.

kunjee17 commented 8 years ago

@rgrempel thanks :). Will looking forward to it. For me (while building SPA) first blocker was good url library and your library just blast that blocker. I'm back to elm. :+1:

amitaibu commented 8 years ago

fyi - I have seen some work by @etaque on this . I think he's also going to consolidate his router solution with the transition module.

etaque commented 8 years ago

yes, the hard work is being done by elm-transit (my router is already doing transitions, but it doesn't work with hashes yet).

kunjee17 commented 8 years ago

@etaque and @rgrempel is it possible that we can mix match both libraries. May be end up with one or two mature routing library. Like React-Router for react.

rgrempel commented 8 years ago

I thought about this a bit more, and I'm pretty sure that it is just a question of getting your location2action (or, now, location2messages) function to return some actions (or messages) that will kick off an animation.

To illustrate, I've updated one of the examples to do that ... when you click on the squares to spin them, you can then use the back / forward buttons, and the URL transition will now be animated (just like the original spin was). Here are the changes:

https://github.com/rgrempel/elm-route-url/commit/1618b1685e8981f3d48ddf8ae92f0657beca1287

But, this isn't really anything that elm-route-url can facilitate, since it has no idea what it means to animate your particular state change -- you just have to return messages that actually trigger an animation, whatever that means in your context.

megaserg commented 8 years ago

@rgrempel - I think an interesting challenge occurs when one wants to implement a transition where e.g. one page slides out of view and a new page slides in, side-by-side. That means both pages are momentarily visible together at the same time, which means they both have to be rendered, which means they both must be in the model (I guess?), which isn't really desirable. Do you know of an elegant solution? (I understand this is quite out of scope for this issue but still relevant).

rgrempel commented 8 years ago

I suppose the Elm-ish solution, as usual, is essentially to model the problem.

So, suppose you have a Page which represents one of several virtual pages, and you've got an update and view function that works with that Model -- so, the normal thing, you might say.

Now, if you want to animate a transition to the next Page, I suppose you'll have to add something like a Maybe AnimationState to the Page. And, the AnimationState would be composed of something like a Page -- that is, the next page -- and something that tracks the animation progress. And your update method would need a modification to kick off the animation (and progress it). And your view method would need to consult the AnimationState to know whether to draw just one Page or perhaps two side-by-side (at some stage of the animation, as tracked within the AnimationState).

Or something like that ... that's all a little vague, of course, but I think that would basically be the idea.

Now, you could imagine a generic AnimationState model type, where, provided with the update, view et. al. functions for the model type, it would wrap them in some way to provide update and view functions that generically handle drawing the various stages of an animation. That seems possible to me, without thinking it through very hard -- there may well be some pitfalls that don't occur to me.