Material design's meaningful transitions for the web

Question

(Sorry, i cant provide any code of what i am asking, because i dont really know where to start.)

About the Meaningful Transitions point in the Material design guidelines.

I m very interested in creating such smooth transition inside my web apps (especially the one where the profile picture goes from an activity to another), but i wonder how to do it using html?

• Is CSS3 transition enough to do it (which style-property should i use to move an element straightforward)?
• Should i use JS/Dart to move the "shared view element" using the weird coordinates system?
• Can it works on dynamic/scrolling layout or should i forget about it?
• Is there any tips to move visually an node from a container to another in a smooth transition?

In a nutshell, Is HTML ready for such of stuff (any code/documentation would be appreciated)? Should we wait for some polymer tools to do this? Or should we simply dont do this in web?

Answer 1

Check out the Polymer core-animated-pages element https://elements.polymer-project.org/elements/neon-animation

They've got some great demos that are very similar to the meaningful transitions https://elements.polymer-project.org/elements/neon-animation?view=demo:demo/index.html&active=neon-animated-pages

The "Icon to top bar" demo is probably the most similar to the one you referenced (you can just view the source to see the Polymer web components used, along w/ the necessary CSS & JS

You can import into your project via Bower:

bower install Polymer/core-animated-pages

And wrap your elements with and define transitions with an attribute like

Here's the code for that cross-fading example:

<style>
#hero1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    background-color: orange;
}
#hero2 {
    position: absolute;
    top: 200px;
    left: 300px;
    width: 300px;
    height: 300px;
    background-color: orange;
  }
  #bottom1, #bottom2 {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    height: 50px;
  }
  #bottom1 {
    background-color: blue;
  }
  #bottom2 {
    background-color: green;
  }
</style>
// hero-transition and cross-fade are declared elsewhere
<core-animated-pages transitions="hero-transition cross-fade">
      <section id="page1">
    <div id="hero1" hero-id="hero" hero></div>
    <div id="bottom1" cross-fade></div>
  </section>
  <section id="page2">
    <div id="hero2" hero-id="hero" hero></div>
    <div id="bottom2" cross-fade></div>
  </section>
</core-animated-pages>