Don't Absolute Position in the Hero Transition

The “hero” transition between chip and card is great fun:

I enjoyed exploring it (and the source demo from which I borrowed liberally). I enjoyed playing with the chip and cards even more. With relatively little effort, I was able to create what Material Design refers to as “motion with meaning.”

But there are at least two issues that I noted after an hour or so of clicking (it really is that fun). First, the hero transition of the half-a-pizza icon is not as smooth as it might be—especially at the end where it jumps down. Second, when I click a pizza topping to add to the pizza, the click event continues to propagate until the card closes.

I like to pick the harder battles first (even though the easy battles never seem to be easy). In this case, I guess that I can simply stop normal event propagation to solve the second problem. Since this Material and Paper Elements stuff is still new to me, that seems the harder of the two problems, so I start with that.

My furst guess is that the problem is related to nesting three elements. In my chip, I am “hero-ing” the entire chip, the top of the chip that contains the color, and the icon:



The hero IDs indicated tell Paper elements how to map visual elements during transitions. The card ultimately gets assigned matching hero IDs like so:



The first_half hero ID maps the chip for first half pizza toppings to the card for first half toppings. The icon in the chip maps to the icon in the card, which only seems to make sense. It is a little odd that I mapped the yellow top in the chip to the <div> that holds the icon in the card. Perhaps that is where things are going wrong?

I think I had meant to map the yellow chip top to the yellow card side. So I move the “color” hero ID to the side in the card:

        <div class="card" layout horizontal
             hero-id="{{selectedTopping}}"
             hero
             on-tap="{{transitionTopping}}">
          <div class="card-left"
               style="background:{{selectedColor}};"
               hero-id="{{ selectedTopping }}-color"
               hero></div>
          <div class="card-right" flex>
            <div layout horizontal center>
              <div class="card-icon"
                   style="background-color:{{selectedColor}};">
                <core-icon
                   src="/assets/{{selectedTopping}}.svg"
                   hero-id="{{ selectedTopping }}-icon"
                   hero></core-icon>
              </div>
              <div flex>
                <!-- Topping selectors here...
              </div>
            </div>
          </div>
        </div>

The effect is actually more satisfying than the previous hero ID mapping:

But the the icon transition back is no better.

After much further fiddling, I find that I can get everything fixed if I simply remove absolute positioning on the elements being transitioned. I really wish this had occurred to me earlier because it took me a lot of digging. On the plus side, I got to use the break-on-element-attribute change in Chrome inspector.

In retrospect, maybe this should have occurred to me sooner as the chip icon was the only thing being absolutely positioned:

      .chip-top .chip-icon {
        position: absolute;
        left: 50px;
        bottom: 75px;
      }

The fix is to simply change that to use plain old padding:

      .chip-top .chip-icon {
        padding-top: 60px;
        padding-left: 50px;
      }

With that, I get a beautiful transition back and forth between chip and card:

So the moral of the story is don't use absolute position on hero (and possibly any) transitions in Paper elements. Also, don't use yellow for the demo color -- it can be a little hard to see, but hard to change when you don't notice until you're nearly done with a post (sorry about that).

Up tomorrow: I try to solve the “easy” problem (please let it be easy).


Day #153

‹prev | My Chain | next›