Haciendo animaciones como las de la web de Apple

La mayoría de veces que he entrado a la web de Apple ha sido para ver sus páginas de productos, las cuales considero unas de las mejores de todo Internet. Las animaciones mientras vamos haciendo scroll en la página ya de por sí son un atractivo más que convence a la hora de comprar un producto. En este artículo no vamos a crear una página tan trabajada como las que hace Apple, pero sí veremos qué método utilizan en muchos de sus sitios para crear esos movimientos:

Resultado final

Para lograr esto necesitaremos dos librerías:

• ScrollMagic
• GSAP

Podéis incluir los CDN para evitar descargarla utilizando las siguientes etiquetas de script que os dejamos GitHub o CodePen:

Aunque podéis ir siguiendo paso a paso todo lo que voy haciendo, podéis echar un vistazo al código final actualizado que podéis encontrar en el repositorio de GitHub:

Código en GitHub

Antes de empezar a picar código, me gustaría que vieseis cuál es el ejemplo que he tomado para crear el efecto. He seguido el ejemplo de Dev Ed, un youtuber de habla inglesa que ha intentado también imitar esta animación en un vídeo suyo.

Puede que penséis que es un simple vídeo lo que aparece en el GIF de arriba, pero no, es lo que ocurre cuando haces scroll en la página de los nuevos AirPods Pro. Es más, si haces scroll hacia arriba, la animación se reproduce a la inversa a la misma velocidad a la que te desplazas.

Aunque a decir verdad, sí, lo que hay detrás de todo esto es un vídeo, pero que cuenta con un efecto de scroll que hoy analizaremos e intentaremos imitar con el spot del nuevo MacBook Air. Yo he elegido este vídeo para seguir con la temática Apple y porque no es un anuncio demasiado largo, pero podéis escoger el video que queráis.

Video de Dev Ed

Una vez descargado el vídeo, lo guardamos dentro de una carpeta src dentro del directorio donde vayáis a hacer el proyecto. Bien, ya tenemos todo listo para comenzar a programar, veamos a ver como estructuramos nuestro proyecto:

Archivo index.html y style.css

Vamos a comenzar dando estilo a nuestra nueva página para luego dar paso a la animación, la cual haremos con JS. En el archivo HTML creamos la estructura básica y añadimos todas las dependencias de JS y CSS que vamos a necesitar (entre ellas el archivo app.js que luego usaremos para darle lógica al programa).

Aquí, vamos a crear dos apartados. El primero será un contenedor donde colocaremos nuestra animación, el título de la página y un texto que aparecerá cuando hagamos scroll. El segundo será un sección donde colocaremos un poco más de texto, y en mi caso, un botón para que podáis acceder directamente al código alojado en GitHub.

Si probáis el código anterior en una pestaña del navegador, veréis como queda todo sin ningún orden específico, así que vamos a retocar todo esto con CSS en nuestro archivo style.css.

Voy a analizar bloque a bloque lo que he escrito en dicho archivo:

• Para empezar, quitamos tanto el margen como el padding a todos los elementos de nuestra página para poder manejarlos mejor.
• Desde el segundo bloque he establecido como fuente la Sans Serif.
• A continuación, hacemos que nuestro contenedor principal ocupe la altura de toda la página.
• En el siguiente tratamos todos los aspectos relacionados con el vídeo. Hacemos que ocupe el tamaño máximo del elemento que lo contiene, que en este caso es toda la pantalla. Además, lo fijamos al fondo con una posición absoluta.
• En el título, establecemos su posición también como absoluta y lo situamos en el centro de la pantalla con un color blanco.
• Algo similar hacemos con el texto del rendimiento, solo que lo situamos en el lado izquierdo en vez de en el centro de la página.
• En el séptimo bloque establecemos el tamaño de la sección del final como la altura máxima de la pantalla.
• El título de dentro lo centramos, aumentamos su tamaño y lo separamos un poco del inicio de la sección.
• Por último, en los 3 últimos bloques tratamos todos los aspectos relacionados con el botón desde os enlazo el código en GitHub.

Ahora ya podéis abrir el index.html y ver cómo ya todo está mejor posicionado para comenzar a implementar la lógica de la aplicación.

Lógica en app.js

Bien, lo primero que vamos a hacer en nuestro archivo app.js es seleccionar y almacenar en una constante todos los elementos del documento que utilizaremos a lo largo de nuestro archivo.

Una vez hecho esto nos ponemos en serio con lo gordo de este proyecto, la librería ScrollMagic. Esta librería funciona con escenas que se van añadiendo a un controlador encargado de mostrarlas en el momento concreto. Así que eso haremos lo primero de todo, crear nuestro controlador:

const controller = new ScrollMagic.Controller();

Con el controlador ya definido, podemos comenzar con la animación principal de nuestro pequeño proyecto: la del vídeo. Para ello crearemos una escena con los siguientes parámetros:

• Duración en ms.
• Contenedor padre, en este caso el contenedor intro.
• El punto de enganche o triggerHook que nos indica el lugar en la pantalla donde queremos que empieza la animación. Como nosotros lo queremos desde la parte de arriba, colocaremos 0.

Por último, aplicaremos los métodos setPin() y addTo() para añadir nuestra escena al controlador que hemos creado anteriormente.

Si probamos ahora nuestra página, veremos cómo aun hace lo que queremos. Para solucionar esto, añadiremos las siguientes lineas de JS:

La primera función actualiza los segundos por los cuales debería ir el vídeo conforma vamos haciendo scroll. La segunda, crea un delay teniendo en cuenta una aceleración para que la animación del video sea lo más fluida posible. Por último, a la función setInterval() le pasamos un parámetro que está relacionado con los FPS que tiene nuestro video. Lo correcto sería colocar el resultado de la división de [1000/fps], pero si en vuestro caso tenéis 30FPS, os recomiendo que coloquéis el valor 100. Podéis jugar con él hasta lograr el resultado deseado.

Lo siguiente que configuraremos es la animación del título. Comenzaremos por crearla:

Como veis, la estructura es bastante similar al anterior Sólo voy a destacar dos cosas. La primera es que gemos creado una animación para el elemento titulo para que cambia su opacidad del 100% hasta hacerse invisible. La segunda es la función setTween() de la escena que hemos creado, donde deberemos añadir la animación que hemos creado anteriormente.

De forma casi idéntica, hacemos la animación del texto donde hablamos del rendimiento:

En este caso colocaremos un offset de 3000 píxeles para que no se muestre hasta que no haya terminado la animación del título, que como hemos indicado anteriormente, tiene una duración de 3000.

Tras hacer todo esto, el código final del archivo app.js que se os quedará debería similar al que hay subido en GitHub o CodePen.

Ya podemos probarlo en nuestro navegador y comprobar el funcionamiento de esta animación. Si tenéis alguna duda podéis poneros en contacto conmigo o podéis revisar la versión final del código que encontrarás en el repositorio de GitHub. Por último, agradecer de nuevo a Dev Ed por la idea.