Animando el tamaño y desplazamiento de un elemento hacia otro

Con la siguiente función podemos animar el desplazamiento de un elemento por la pantalla utilizando un elemento virtual que creamos al iniciarse la animación y eliminamos al llegar a su destino.

Por el camino cambiaremos el tamaño del elemento para que se corresponda con el de destino.

var $source = $('.source'),
    $target = $('.target'),
    $start = $($source)[0]).clone(),
    $end = $target[0],
    rectStart = $source[0].getBoundingClientRect(),
    rectEnd = $end.getBoundingClientRect();

$start.css({ 
    position: 'absolute',
    top: rectStart.top + window.scrollY, 
    left: rectStart.left,
    bottom: rectStart.bottom,
    height: rectStart.height,
    width: rectStart.width,
    right: rectStart.right,
    opacity: 0
}).appendTo($('body'));
$start.animate({
    top: rectEnd.top + window.scrollY, 
    left: rectEnd.left,
    bottom: rectEnd.bottom,
    height: rectEnd.height,
    width: rectEnd.width,
    right: rectEnd.right,
    opacity: 1
},{
    duration: 666,
    complete: function () {
        $start.remove();
}
}); 

En el siguiente Codepen podemos ver un ejemplo

See the Pen Element source animation to target by Yago Pérez Vázquez (@yagopv) on CodePen.