title: Animate a widget from outside its container to its final position
body: <p>I'm trying to create an animation where a widget moves from outside its container to its final position.</p>
  
  <p>Something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/J2Wt2.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/J2Wt2.gif" alt="example 1"></a></p>
  
  <p>Or something like this (In the <strong>Choose Exercises</strong> screen):</p>
  
  <p><a href="https://yalantis.com/uploads/ckeditor/pictures/235/content_draft_08.gif" rel="noreferrer"><img src="https://yalantis.com/uploads/ckeditor/pictures/235/content_draft_08.gif" alt="example 2"></a></p>
  
  <p>I don't know the final position inside the container in advance (computed by the container, like a grid, a row, a column, etc.).</p>
  
  <p>I think that I need a widget that knows its position on the screen. An overlay to draw the animation above the containers and to animate the opacity of the two widgets in the containers.
  Am I on the right track?</p>