¿Quieres saber cómo se hace esta animación?
Es un logo SVG con scroll animation (SVG con animación de scroll).
Voy a explicarte en detalle cómo lo he hecho.
Aquí tienes el código en codepen:
See the Pen
Logo SVG animation on scroll by animaticss (@animaticss)
on CodePen.
Lo primero es usar un logo SVG con el código propio HTML.
Es decir, no usarás un tag imagen en el HTML, usarás un tag SVG con el código del propio logo.
Me refiero a esto:
<svg class="c-logo__svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 248.59 29.29">
<title>logo-animaticss-full-negative</title>
<g>
<g>
<path class="c-logo__svg-item" d="M55.82,26.07c0,1.12.24,1.56,1.09,1.56h.48a4,4,0,0,0,.64-.08v3.18a11.53,11.53,0,0,1-2.89.52c-1.89,0-3.18-.64-3.54-2.53a10.64,10.64,0,0,1-7.19,2.53c-3.74,0-7.11-2-7.11-6.07,0-5.18,4.14-6,8-6.47,3.34-.64,6.23-.2,6.23-2.93,0-2.41-2.49-2.81-4.3-2.81-2.57,0-4.38,1-4.58,3.29H38.06c.32-5.34,4.82-6.91,9.44-6.91,4.06,0,8.32,1.65,8.32,6Zm-4.58-5.79c-1.41.93-3.58.89-5.62,1.25s-3.74,1-3.74,3.45c0,2.09,2.61,2.65,4.22,2.65,2,0,5.14-1,5.14-3.93Z" transform="translate(-2 -2)"/>
<path class="c-logo__svg-item c-logo__svg-item--out" d="M60.76,9.92H65.1V13l.08.08a7.5,7.5,0,0,1,6.47-3.7c4.54,0,7.35,2.37,7.35,7.07V30.69H74.42V17.63C74.3,14.38,73.1,13,70.36,13c-3,0-5,2.41-5,5.46V30.69H60.76Z" transform="translate(-2 -2)"/>
<path class="c-logo__svg-item c-logo__svg-item--out" d="M83.94,2h4.58V6.34H83.94Zm0,7.92h4.58V30.69H83.94Z" transform="translate(-2 -2)"/>
<path class="c-logo__svg-item c-logo__svg-item--out" d="M93.51,9.92h4.34v2.89H98a6.94,6.94,0,0,1,6.39-3.46c2.53,0,4.9,1.09,5.82,3.46a7.51,7.51,0,0,1,6.51-3.46c4.38,0,7,2,7,7V30.69h-4.58V18.55c0-3.33-.2-5.58-3.78-5.58-3.09,0-4.42,2-4.42,5.54V30.69h-4.58V17.35c0-2.89-.88-4.38-3.65-4.38-2.37,0-4.54,2-4.54,5.38V30.69H93.51Z" transform="translate(-2 -2)"/>
<path class="c-logo__svg-item c-logo__svg-item--out" d="M145.86,26.07c0,1.12.24,1.56,1.08,1.56h.49a4,4,0,0,0,.64-.08v3.18a11.53,11.53,0,0,1-2.89.52c-1.89,0-3.18-.64-3.54-2.53a10.64,10.64,0,0,1-7.19,2.53c-3.74,0-7.11-2-7.11-6.07,0-5.18,4.14-6,8-6.47,3.34-.64,6.23-.2,6.23-2.93,0-2.41-2.49-2.81-4.3-2.81-2.57,0-4.38,1-4.58,3.29H128.1c.32-5.34,4.82-6.91,9.44-6.91,4.06,0,8.32,1.65,8.32,6Zm-4.58-5.79c-1.41.93-3.58.89-5.63,1.25s-3.73,1-3.73,3.45c0,2.09,2.61,2.65,4.22,2.65,2,0,5.14-1,5.14-3.93Z" transform="translate(-2 -2)"/>
<path class="c-logo__svg-item c-logo__svg-item--out" d="M148.71,9.92h3.46V3.69h4.58V9.92h4.14v3.41h-4.14V24.42c0,1.89.16,2.85,2.21,2.85a7.91,7.91,0,0,0,1.93-.16v3.54a24.93,24.93,0,0,1-3,.24c-4.82,0-5.62-1.85-5.74-5.31V13.33h-3.46Z" transform="translate(-2 -2)"/>
<path class="c-logo__svg-item c-logo__svg-item--out" d="M164.3,2h4.58V6.34H164.3Zm0,7.92h4.58V30.69H164.3Z" transform="translate(-2 -2)"/>
<path class="c-logo__svg-item c-logo__svg-item--out" d="M188.49,16.47c-.68-3.1-2.53-5-5.87-5-4.82,0-7.27,4.46-7.27,8.84s2.45,8.84,7.27,8.84a6.23,6.23,0,0,0,6-5.9h2.53c-.68,5-3.9,8-8.56,8-6.31,0-9.8-5-9.8-11s3.49-11,9.8-11c4.46,0,7.8,2.33,8.4,7.12Z" transform="translate(-2 -2)"/>
<path class="c-logo__svg-item c-logo__svg-item--out" d="M207.13,16c-.12-3.13-2.53-4.54-5.42-4.54-2.25,0-4.9.89-4.9,3.58,0,2.21,2.53,3,4.29,3.49l3.38.77c2.89.44,5.9,2.13,5.9,5.74,0,4.5-4.45,6.23-8.31,6.23-4.86,0-8.08-2.21-8.52-7.31h2.53c.2,3.41,2.73,5.18,6.11,5.18,2.41,0,5.66-1,5.66-3.94,0-2.41-2.25-3.21-4.54-3.77l-3.25-.73c-3.29-.84-5.79-2-5.79-5.54,0-4.22,4.14-5.83,7.8-5.83,4.18,0,7.39,2.17,7.59,6.67Z" transform="translate(-2 -2)"/>
<path class="c-logo__svg-item c-logo__svg-item--out" d="M226.46,16c-.12-3.13-2.53-4.54-5.43-4.54-2.25,0-4.9.89-4.9,3.58,0,2.21,2.53,3,4.3,3.49l3.38.77c2.89.44,5.9,2.13,5.9,5.74,0,4.5-4.46,6.23-8.32,6.23-4.86,0-8.07-2.21-8.51-7.31h2.53c.2,3.41,2.73,5.18,6.1,5.18,2.42,0,5.67-1,5.67-3.94,0-2.41-2.25-3.21-4.54-3.77l-3.26-.73c-3.29-.84-5.78-2-5.78-5.54,0-4.22,4.14-5.83,7.79-5.83,4.18,0,7.4,2.17,7.6,6.67Z" transform="translate(-2 -2)"/>
</g>
<g>
<polygon class="c-logo__svg-item" points="29.85 7.37 18.48 29.25 22.97 29.25 34.32 7.35 29.85 7.37"/>
<polygon class="c-logo__svg-item" points="0 19.88 15.3 29.25 15.3 25.2 4.9 18.3 15.3 11.39 15.3 7.36 0 16.64 0 19.88"/>
</g>
<polygon class="c-logo__svg-item c-logo__svg-item--move" points="248.59 16.72 233.28 7.36 233.28 11.4 243.69 18.3 233.28 25.2 233.28 29.25 248.59 19.95 248.59 16.72"/>
</g>
</svg>Una vez tienes el código del logo SVG, le asignas a los nodos que quieras aplicar una animación, una clase especial.
Por ejemplo, en este caso quiero aplicar una animación para ocultar todas las letras excepto la primera A y mover el símbolo de «mayor que» (>) hacía una posición diferente, cerca de la primera A.
Entonces voy a añadir una clase para las letras que quiero ocultar y otra clase diferente al símbolo mayor que para aplicarle el desplazamiento.
Las letras que se ocultarán tienen la clase `c-logo__svg-item--out`
El símbolo «mayor que» (>) del final del logo que desplazaré cerca de la primera A, tiene la clase `c-logo__svg-item--move`
Perfecto, ahora necesitamos saber de alguna manera, cuándo deben aplicarse las animaciones de CSS.
Para ello, añadiremos una clase de estado al logo SVG.
Para nosotros, el logo es el nodo que contiene el código SVG, es decir, el nodo `c-logo`
La clase que añadiremos se llamará, por ejemplo, `is-small`, para saber que el logo estará más pequeño de lo normal.
Pero se añadirá sólo cuando el usuario hace scroll.
- Si hacemos scroll hacia el final del documento se añadirá la clase
`is-small`al logo. - Si hacemos scroll hacia el principio del documento, quitaremos esa clase de estado
`is-small`y volverá el logo al estado inicial, que era con todas las letras visibles y el símbolo «mayor que» en su posición original.
Resumiendo, hay que añadir o quitar la clase `is-small` al logo dependiendo de la dirección de scroll del usuario.
Para controlar el comportamiento del scroll, tenemos que hacerlo con JavaScript.
Mira quedaría así el código de JavaScript:
// GLOBAL VARS
var ticking = false;
var lastScrollTop = 0;
// EVENTS
window.addEventListener("wheel", scrollCallback);
window.addEventListener("scroll", scrollCallback);
// SCROLL CALLBACK
function scrollCallback(e) {
if(!ticking) {
requestAnimationFrame(update);
}
ticking = true;
}
// UPDATE
function update() {
// RESET TICK TO FALSE
ticking = false;
// GET CURRENT SCROLL POSITION
var st = window.pageYOffset || document.documentElement.scrollTop;
if(st > lastScrollTop){
// DOWN SCROLL
$('.js-logo').addClass('is-small');
}else if(st < lastScrollTop){
// UP SCROLL
$('.js-logo').removeClass('is-small');
}
// SAVE CURRENT SCROLLTOP
lastScrollTop = st;
}Como puedes ver, uso la clase de JavaScript como selector del logo (`js-logo`).
Es decir, no usamos la clase `c-logo`, usaremos la clase `js-logo`, para diferenciar el estilo del comportamiento.
Esto es una muy buena práctica a tener en cuenta.
Un inciso,
Si quieres una explicación más detallada de porqué lo hago así, es por un conjunto de buenas prácticas y una metodología de desarrollo front end, más concretamente la metodología BEMIT.
He impartido un curso recientemente en Udemy donde te explico dicha metodología. (Link al curso de Udemy)
Bien sigamos, habíamos dicho que usaremos la clase de JavaScript, la clase `js-logo`, para atacar al nodo deseado.
En el código JavaScript, para controlar el scroll hacemos lo siguiente:
// EVENTS
window.addEventListener("wheel", scrollCallback);
window.addEventListener("scroll", scrollCallback);
// SCROLL CALLBACK
function scrollCallback(e) {
if(!ticking) {
requestAnimationFrame(update);
}
ticking = true;
}Primero, capturamos el evento del scroll en el navegador y cuando se lance ese evento, queremos que se lance nuestra función `update()`
// UPDATE
function update() {
// RESET TICK TO FALSE
ticking = false;
// GET CURRENT SCROLL POSITION
var st = window.pageYOffset || document.documentElement.scrollTop;
if(st > lastScrollTop){
// DOWN SCROLL
$('.js-logo').addClass('is-small');
}else if(st < lastScrollTop){
// UP SCROLL
$('.js-logo').removeClass('is-small');
}
// SAVE CURRENT SCROLLTOP
lastScrollTop = st;
}Nuestra función `update()` lo que hará será comprobar la dirección del scroll.
Como dijimos, si el scroll es hacia el final del documento se añadirá la clase `is-small`.
Y por el contrario, si el scroll es hacia el principio del documento, se le quitará la clase `is-small`.
Para comprobar la dirección de scroll, lo hacemos comparando la posición actual de scroll con la anterior posición conocida.
Una vez comparada la posición de scroll, volvemos a guardarnos en una variable la posición actual para volver a hacer la comparación en el futuro.
Además estamos usando el recurso `RequestAnimationFrame()`
Si quieres saber cómo se utiliza en detalle este recurso del `RequestAnimationFrame()`, o simplemente quieres otro ejemplo más en detalle de cómo controlar el scroll, aquí te dejo otro artículo donde lo explico más al detalle: RequestAnimationFrame con sprites
Puedes comprobar en el codepen que funciona correctamente, se aplica la clase de estado en función de la dirección de scroll.
Bien y ahora el CSS para aplicar las animaciones sería así:
.c-logo{
// ...
&__svg-item{
// ...
&--out{
transition: all 0.2s ease-in-out 0.2s;
opacity: 1;
visibility: visible;
.is-small &{
opacity: 0;
visibility: hidden;
transition-delay: 0s;
/* CSS
.is-small .c-logo__svg-item--out{
opacity: 0;
visibility: hidden;
transition-delay: 0s;
}
*/
}
}
&--move{
transition: all 0.36s ease-in-out 0s;
.is-small &{
transform: translateX(-171px);
transition-delay: 0s;
}
}
}
}La clase `c-logo__svg-item--out` hará ocultar las letras y la clase `c-logo__svg-item--move` hará desplazar el símbolo mayor que cerca de la primera A.
Por defecto no tendrá nada especial, sólo debe ocurrir la animación cuando el logo tenga la clase de estado `is-small`.
La animación para ocultar aplica `opacity: 0;`.
Y la animación para mover aplica `transform` de los pixels deseados, en este caso `transform: translateX(-171px);`
Si no conoces SASS (SCSS), la equivalencia en CSS normal sería este selector:
.is-small .c-logo__svg-item--out{
opacity: 0;
visibility: hidden;
transition-delay: 0s;
}Solo cuando la clase `c-logo` tenga la clase `is-small` se aplicarán las animaciones de ocultar y mover.
Puedes comprobar el resultado en el codepen, todo debería funcionar perfectamente.
Bueno, pues ya está.
Si aplicas esta animación en alguna web no dudes en escribirla en los comentarios del vídeo.
Haré una recopilación para enseñar las mejores en otro vídeo.
Si te ha gustado el artículo, apóyame para que traiga más contenido como este.
Dale a like al vídeo y comenta, suscríbete al canal, pero sobretodo, comparte con tus amigos front end, quizás alguno quiera aplicar esta animación en alguna web.
Nos vemos muy pronto.
Un abrazo y … ¡a maquetar!