Ember 2 render parent page on zoom out in the background

i am new to ember, could you please give me a direction:

i am working on zoom out effect with css: say,

• there are foo route and foo.bar route
• we are in the foo.bar route
• when navigating using breadcrumbs to foo:
  • foo.bar template zooms out to a position where square (see twiddle) with title "foo bar" on a foo template is
  • foo template is rendered behind foo.bar template before zoom out effect, so that while foo.bar is zooming out - foo template is already visible behind it

here is the code for zoom out and following transition to parent route: ember-twiddle

so, main questions i have are:

• how to render a template to get the described effect in ember 2 with pod structure
• how to get coordinates of child square on parent template, so that it is known to where we should make translation

any advice is appreciated.

thank you!