title: Full screen transition animation in react
body: <p>Looking for some help on how to approach this animation: <a href="https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B3T7oTWa3HiFZ3BiM1dnR0ZPU1k/animation_meanigfultrans_visualcont.webm" rel="nofollow">https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B3T7oTWa3HiFZ3BiM1dnR0ZPU1k/animation_meanigfultrans_visualcont.webm</a></p>
  
  <p>Initial attempts with react router didn't go well, eventually decided I don't need dedicated routes for each open component. Now I am running into positioning issues... </p>
  
  <p>The circle fills up the whole screen, so it needs to be in a div that is 100% x 100% and at 0, 0, but the items in the grid need their own correct positions. Currently I'm using isotope within a react component to layout the grid.</p>
  
  <p>If I change the container div to 0,0 so the circle can scale up, the child divs also move from their original position. The circle needs to take over full screen but the thumbnail image to stay in place (until I tell it to move).</p>
  
  <p>I'm not asking anyone to provide literal code examples, however just asking for a discussion on conceptually how to approach the problem.</p>