CODEWITHSUNDEEP
cssdartpolymerdart-polymermaterial-design
Anthony Bobenrieth
Anthony Bobenrieth

Reputation: 2884

Material design's meaningful transitions for the web

(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?

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?

Upvotes: 6

Views: 5525

Answers (3)

Kyle Ledbetter
Kyle Ledbetter

Reputation: 1221

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>

Upvotes: 7

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657248

Polymer doesn't do anything of these things. This is all just HTML+CSS+JavaScript. And you can do all of this without Polymer.

All Polymer does, is it allows you to encapsulate these things in a custom element.

The core-elements and paper-elements are some examples. You can build such elements yourself or clone and modify/extend them.

Upvotes: 5

cnsumner
cnsumner

Reputation: 533

As far as I know, polymer is supposed to be able to do all of this. If not yet, it should be able to soon.

The basic idea behind polymer is to allow you to make consistent interfaces across all devices (web, computer, android). So if Android L can do those transitions, then they most certainly mean for polymer to also have that capability.

Upvotes: 2

Related Questions