Animación de Thumbnail a Full Width

Navegando por ahí hemos encontrado una animación que os puede resultar muy útil. Es para convertir el thumbnail de una imagen en full width.

O lo que es lo mismo traducido al cristiano, para hacer que la miniatura de una imagen ocupe todo el ancho de la pantalla. El resultado es espectacular, juzgad por vosotros mismos:

El efecto de la animación está hecho sobre Locomotive Scroll, que aunque está en una fase algo experimental, permite animaciones muy fluidas.

De thumbnail a full width

La idea principal detrás de este fantástico recurso es escalar el elemento y su hijo a otra escala. Para eso lo primero que necesitamos es establecer la escala del contenedor principal.

Lo llamaremos content__intro, e inicialmente debemos escalarlo a un valor al que queremos que llegue el full width.

<div class="content__intro content__breakout">
     <img class="content__intro-img" src="img/1.jpg" alt="Some image" />
</div>

Teniendo el ancho y alto iniciales de un elemento y también sus dimensiones, podemos calcular sin problemas los valores de «escala» para la animación, con este sencillo js:

let introTransform = {
     scaleX: imageSettings.imageWidthEnd / imageSettings.imageWidthStart,
     scaleY: imageSettings.imageHeightEnd / imageSettings.imageHeightStart,
     y: (winsize.height/2 - introRect.top) - introRect.height/2
};

También movemos el elemento para que esté centrado en la pantalla verticalmente. Definimos los valores iniciales de las variables en nuestro CSS:

body {
     ...
     --image-height-start: 555px;
     --image-width-end: 260px;
     --image-height-end: 320px;
}

Y aquí viene la magia. Nuestro ancho de comienzo es del 100% del viewport, así que no necesitamos aplicar nada. Para la imagen usamos esto:

gsap.set(this.DOM.introImg, {
     scaleX: 1/introTransform.scaleX * imageSettings.imageWidthEnd / this.DOM.introImg.clientWidth,
     scaleY: 1/introTransform.scaleY * imageSettings.imageHeightEnd / this.DOM.introImg.clientHeight
});

1/introTransform.scaleX es el contador de escala para el contenedor de fuera. El segundo valor que multiplicamos es para escalar la imagen al tamaño que queremos.

Pero bueno, menos rollo y más manteca al bollo. Puedes ver una demo de esto funcionando en este enlace, y los ficheros puedes descargarlos de este otro enlace.

Fuente / más información: Proyecto en GitHub