cover

Esta es la <navbar> que está de moda


En este video, vamos a animar una barra de navegación, para que se sienta todavía mejor. 👨🏻‍💻

Primera parte: Maquetado

<AnimatedNavBar> será nuestro componente principal, pero se armará de otros cuatro, tres visibles y un <Button> por debajo.

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Vamos a crear un componente <Button> base para poder reusarlo asignándole variantes.

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Este es el componente más robusto y complejo, pero su robustez nos permite crear el resto de los componentes de manera más compacta. ▪️

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Con unas cuántas utilidades de TailwindCSS, estamos listos para añadir el panel y luego su animación.

Segunda parte: Los paneles de opciones

He tenido que construir los tres diferentes paneles. Con el propósito de no detenernos demasiado en el maquetado, te dejo el código en los enlaces y por ahora los usaremos importándolos.

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Nuestro componente <Panel> queda así y estamos listos para concentrarnos en lo mero bueno: las animaciones. 🤓🪄

Tercera parte: Animación con layout

Vamos a fingir, como le hacemos siempre en la vida pero ahora en el tutorial. Vamos a simular que el contenedor cambia de tamaño según se navega entre botones, pero será falso, solo parecerá que se reajusta pero en realidad es la misma animación una y otra vez. ➿

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Para lograrlo, hemos transformado el panel en un componente <motion> al que se le han dado los props: animate e initial. Así como una key que cambiará detonando las animaciones. Animaremos con height y width ”auto". Necesitamos de un prop: currentHover, para que nos ayude a saber si mostrar el layout o mejor devolvemos null. 🤔

Ahí está, pues. Fíjate con qué poco se puede hacer tanto. 🪄✨💬

Abrazo. Bliss. 🤓

Enlaces relacionados

Aquí está todo el código

Inspiración

meta cover

¿Qué es Prettier y por qué deberías usarlo?

Checa este otro Post

meta cover

¿Cómo usar el plugin de Tailwind para formularios?

Checa este otro Post

¡Nuevo curso!

Animaciones web con React + Motion 🧙🏻