Animated Pages support?

[TinyCoop]

Great router. Been playing around with it and it all works as expected. One thing I wondered would be how compatible it is with animated pages?

In particular if I look at this example of animating sections of the page from chip to card using sections.

http://www.polymer-project.org/components/core-animated-pages/demos/music.html

Can you imagine how this might work with your router so that we could have for example.

/ (default) /fragments /past-prologue

as pages that we could use the back and forward button to navigate?

I think this is important as single page web apps and material design in a way blur the boundary for what is one page and what is the next but I think the user still wants the back button and a url link to work as expected.

Hope this is the right place to put this comment!

[erikringsmuth]

This is something I want. I've done some reading on web animations but I'm a noobie when it comes to this stuff. http://www.polymer-project.org/platform/web-animations.html http://dev.w3.org/fxtf/web-animations/

Transitions and linkable URLs would be awesome! I'll keep trying to learn web animations. Any tips or ideas are welcome too!

[TinyCoop]

Yes I'm still trying to get my head around it.

I think the ideal solution would be to extend the polymer animated pages component so that when a page is transitioned it pushes it's path to the URL. Maybe something like this.

I think extending core-animated-pages is more in line with the whole polymer approach than replicating the transitions yourself but I guess it depends how easy it looks. Maybe post something to the google group?

Cheers.

On 3 September 2014 14:02, Erik Ringsmuth notifications@github.com wrote:

This is something I want. I've done some reading on web animations but I'm a noobie when it comes to this stuff. http://www.polymer-project.org/platform/web-animations.html http://dev.w3.org/fxtf/web-animations/

Transitions and linkable URLs would be awesome! I'll keep trying to learn web animations. Any tips or ideas are welcome too!

— Reply to this email directly or view it on GitHub https://github.com/erikringsmuth/app-router/issues/17#issuecomment-54292861 .

[erikringsmuth]

I want to avoid extending any elements since I'm guessing core-animated-pages is only the first of many types of web component pages.

I coded up a concept using core-animated-pages. It's kind of weird because core-animated-pages extends core-selector and that's how you choose which page to show. You also have to have all pages in the DOM right away inside the core-animated-pages element.

With these changes, all the router is doing is listening for a URL change and updating the data binding on the active route to change the selected page using the core-selector's selected attribute.

I made a branch of the app-router with a change to allow you to specify persistOnNavigation on a specific route. This tells the router to not replace the route with a new instance of the custom element. https://github.com/erikringsmuth/app-router/tree/persist-on-navigation

I also created a core-animated-pages branch in the examples and pulled in the app-router persist-on-navigation branch. Try running node server.js in the polymer-animated-pages-routing folder. https://github.com/erikringsmuth/app-router-examples/tree/core-animated-pages

I've been staring at this for too long tonight so I'm gonna take a break ;)

This all feels odd to me. There must be a better way that I'm not seeing yet. This might take me a couple weeks to work through but I'll keep at in my spare time.

[TinyCoop]

Great. I think web components are very flexible which means it may be awhile before we settle on a convention over how to work with all of this. Thanks for responding so quickly to my request. I put something up using your work which shows it working with hero transitons.

http://animated.dobee.org/

You can animate between hero1 and hero2 by clicking them I had to add my own history.pushState call for that as there is no way to programatically change pagestate with your router as far as I know?

There seems to be some glitch with firefox? I'm using .htaccess to simply redirect all calls through index.html which allows direct calling of pages - maybe that this is messing with css on an embedded component but not sure why?

Many thanks again. I want to use it in a project I'm working on and I will feedback any thoughts I have while I use it.

[erikringsmuth]

Cool! You're changing state correctly with pushState. I wanted it to be done that way so that the URLs are persisted.

That glitch looks weird! I don't have any ideas there yet.

I'm starting to see why some of the other routers work the way they do. https://gist.github.com/addyosmani/aa3d70356e593f7554c8

The flatiron directory example just listens for a URL change and updates the data binding. It's too simple for most cases, but it might be exactly what we want for core-animated-pages or anything extending core-selector. https://github.com/PolymerLabs/flatiron-director

[erikringsmuth]

I put this together to show how flatiron-director works.

https://github.com/erikringsmuth/polymer-router-demos

I'm leaning away from adding my persistOnNavigation changes to the app-router. core-selector doesn't feel like it fits correctly with the way app-router works. I'd still like to add transitions and it can probably be done with the hero attributes or web animations. This issue actually made me learn the hero transitions!

[erikringsmuth]

I've got core-animated-pages support in the pipeline https://github.com/erikringsmuth/app-router/commit/15dfd3c00dd432b83ce9a3a82fa17ec57a677b42. The initial chunk of coding is done. It just needs documentation and testing some more variations. I'll hopefully be pushing this out by the end of next week.

<app-router core-animated-pages transitions="hero-transition cross-fade">
  <!-- each app-route is a page and you can apply transitions to your pages or elements within them -->
</app-router>

[erikringsmuth]

And it's up! http://erikringsmuth.github.io/app-router/#/core-animated-pages

I'm saying it's experimental for now. Depending on which browser and animations I use I've had very mixed results. I can't tell if it's something I'm doing or something with core-animated-pages. I'm not really doing that much in the first place. When core-animated-pages is enabled I delegate a lot of the work to a <core-animated-pages> element in the <app-router>'s shadow DOM. I think it'll be an ongoing thing figuring out the performance issues.

[dong77]

I cannot get the animation work at all with Polymer 0.5.1. Does this feature really work?

[erikringsmuth]

The core-animated-pages are still buggy for some transitions.

This is probably the simplest example that does work. The pages will fade out and in.

<html>
  <head>
    ...
    <link rel="import" href="/bower_components/app-router/app-router.html">
    <link rel="import" href="/bower_components/core-animated-pages/core-animated-pages.html">
  </head>
  <body unresolved>
    <app-router core-animated-pages transitions="cross-fade-all">
      ...
    </app-router>
  </body>
</html>