title: Advanced Material Design Transition with JS & CSS - Where to start?
body: <p>I'm working on some animation prototyping for the web right now and noticed that material design packs some pretty advanced stuff. While many examples of the animations are visible online, I found one that got me real interested due to it's fluid motion. There's a video of a transition in a music player, where a container breaks free from a grid, information slides out behind it and a coloured bubble grows from it and cover the screen while dissolving to show a background image.</p>
  
  <p>You can find the video here, under "Visual continuity" (displaying use on a tablet, but non-the less)
  <a href="http://www.google.com/design/spec/animation/meaningful-transitions.html" rel="nofollow">http://www.google.com/design/spec/animation/meaningful-transitions.html</a></p>
  
  <p>This is pretty far from the stuff I'm used to, and after five failed attempts to do it I'd like to see how someone else would approach the problem. Any ideas on structure, positioning rules or anything else?</p>