How to create a hero-transition animation without core-animation-pages

[da...@artscience.ca]

Hey does anyone know how I can get the same effect as the hero-transition without using core-animation-pages

https://www.polymer-project.org/0.5/components/core-animated-pages/demos/grid.html

I basically want a div to scale from the center of the page out. but be between layers and have a layer underneath:

I tried this:

<div relative style="z:index:1000" >

            <div layout horizontal center-center fit style="background:blue;">

                  <div id="target" layout vertical center-center>

            

                   </div>

              </div>

        </div>

But the element z-index wont go on top.

Thanks for any assistance

David

[bte...@google.com]

Bumping this as I'm trying to implement something similar today. Anyone tried this yet?

[Rob Dodson]

Might look into: https://aerotwist.com/blog/flip-your-animations/

Btw you should be able to do this with neon-animated-pages but I understand if maybe you don't want to, or can't use them. FWIW, I shot a video showing how to do some of the transitions with neon-animated-pages
https://www.youtube.com/watch?v=wMhq1o0DULM

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/59ec8fe0-354a-4fdc-a5cb-da35108917d3%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.