title: Ember 2 render parent page on zoom out in background
body: <p>i am new to ember, could you please give me a direction:</p>
  
  <p>i am working on zoom out effect with css:
  say, </p>
  
  <ul>
  <li>there are <strong>foo</strong> route and <strong>foo.bar</strong> route</li>
  <li>we are in the <strong>foo.bar</strong> route</li>
  <li>when navigating using breadcrumbs to <strong>foo</strong>:
  
  <ul>
  <li><strong>foo.bar</strong> template zooms out to a position where square (see twiddle) with title "foo bar" on a <strong>foo</strong> template is</li>
  <li><strong>foo</strong> template is rendered behind <strong>foo.bar</strong> template before zoom out effect, so that while <strong>foo.bar</strong> is zooming out - <strong>foo</strong> template is already visible behind it</li>
  </ul></li>
  </ul>
  
  <p>here is the code for zoom out and following transition to parent route: <a href="https://ember-twiddle.com/c9ea34b2fda66ec120d6d47b7f689b81?openFiles=foo.index.template.hbs%2Ctemplates.components.click-me.hbs&amp;route=%2Ffoo%2Fbar" rel="nofollow">ember-twiddle</a></p>
  
  <p>so, main questions i have are:</p>
  
  <ul>
  <li>how to render a template to get the described effect in ember 2 with pod structure</li>
  <li>how to get coordinates of child square on parent template, so that it is known to where we should make translation</li>
  </ul>
  
  <p>any advice is appreciated.</p>
  
  <p>thank you!</p>