fxedel/flip-element

Element that supports include two sub-elements and fire a flip animation between then.

<flip-element>

A Polymer web component for Adobe Creative Demo and API docs

The flip-element allows you to add two children nodes, one should have a front attribute and the other should have a back attribute. After this just call the flip when you want, so you will have a great animation!

It's important to define the same size to front and back children node, like this:

    <flip-element id="example">
      <div back style="width: 360px; height: 300px;">
        <iframe width="360" height="300" src="https://www.youtube.com/embed/c6SMZAOwrQQ" frameborder="0" allowfullscreen>
        </iframe>
      </div>
      <img front style="width: 360px; height: 300px;" src="https://s-media-cache-ak0.pinimg.com/originals/83/90/0a/83900a5b6d403ddbfd4e843ea70828f4.jpg">
    </flip-element>

After that, create an editor:

    this.$.example.flip();