Creé un componente de utilidad React para animaciones con Tailwind y CSS: AnimateIn

He estado usando el mismo patrón de animación en mis proyectos desde hace un tiempo para animar elementos en la pantalla. En su forma más simple, tendría un elemento con un estilo con opacidad de cero, luego cambiaría el estilo para que tenga una opacidad de uno con una transición CSS de un segundo.

Podemos aprovechar eso agregando otras propiedades que realicen la transición, cambiando la duración, agregando un retraso o configurando una aceleración personalizada.

<AnimateIn/> es un componente reutilizable de React que he creado para incluirlo cada vez que quiero agregar rápidamente algunos efectos de animación a mis proyectos. Un componente de utilidad simple que combina animación CSS con clases Tailwind para crear animaciones fluidas y llamativas con el mínimo esfuerzo.

Echemos un vistazo a cómo se usa. Después de importar el componente, defina from y to los estados con clases Tailwind. Envuelva el elemento de destino dentro de <AnimateIn/> para ver cómo la animación cobra vida.

 import AnimateIn from '../animation/AnimateIn'; <AnimateIn from="opacity-0 scale-90" to="opacity-100 scale-100" duration={500} > <YourComponent /> </AnimateIn>

A continuación se muestra un ejemplo un poco más complejo que utiliza más propiedades para animar un título y un subtítulo.

 import AnimateIn from '../animation/AnimateIn'; <header> <AnimateIn as="h1" from="opacity-0 translate-y-32" to="opacity-100 translate-y-0" delay={500} duration={300} className="text-4xl" style={{transitionTimingFunction:"cubic-bezier(0.25, 0.4, 0.55, 1.4)"}} > My Big Headline </AnimateIn> <AnimateIn as="h2" from="opacity-0 scale-0" to="opacity-100 scale-100" delay={800} duration={500} className="text-lg" > This is a subtitle below the headline </AnimateIn> </header>

En el ejemplo del título, <AnimateIn/> se utiliza para crear un efecto deslizante combinado con un desvanecimiento. Así es como cada propiedad contribuye a la animación:

• as propiedad: al establecer as="h1" , le decimos a AnimateIn que represente la animación como un elemento <h1> .

• Propiedades from y to : La propiedad from inicia el título fuera de la pantalla ( translate-y-32 , moviéndolo 32 unidades hacia abajo) e invisible ( opacity-0 ). La propiedad to luego lleva el título a su posición final (de nuevo a translate-y-0 ) y lo hace completamente visible ( opacity-100 ).

• Propiedad duration : la animación está configurada para comenzar inmediatamente sin demora y se ejecuta durante 300 ms.

• Propiedad className : className="text-4xl" aplica la clase de utilidad de Tailwind para establecer el tamaño de fuente, haciendo que el título se destaque de manera destacada.

• Propiedad style : la transitionTimingFunction ( cubic-bezier(0.25, 0.4, 0.55, 1.4) ) agrega una facilidad única a la animación, dándole un efecto de rebote.

El subtítulo utiliza un conjunto diferente de animaciones para complementar el título, creando un flujo visual coherente.

• propiedad as : aquí, as="h2" representa el componente como un elemento <h2> , adecuado para un subtítulo.

• propiedades from y to : el subtítulo comienza reducido a cero ( scale-0 ) e invisible ( opacity-0 ), luego aumenta a su tamaño natural ( scale-100 ) y se vuelve completamente visible ( opacity-100 ). Este efecto de escala, combinado con un desvanecimiento, agrega profundidad a la animación.

• Propiedades delay y duration : el subtítulo también comienza después de un retraso de 800 ms, por lo que comienza después de que el título se haya animado por completo. Este enfoque escalonado garantiza que cada elemento tenga su momento de atención.

• Propiedad className : className="text-lg" establece el tamaño de fuente del subtítulo, haciéndolo más pequeño que el título pero aún significativo.

Para comprender mejor lo que está sucediendo, veamos el código fuente de <AnimateIn/> en Github :

<AnimateIn/> utiliza un gancho useState para inicializar el estado de la animación con la propiedad from , que debe ser una o más clases de utilidad Tailwind, preparando el escenario para el punto de inicio de la animación antes de que se realice cualquier animación.

El primer gancho useEffect en el componente es para respetar las preferencias del usuario en cuanto a movimiento reducido. Al escuchar la consulta de medios (prefers-reduced-motion: reduce) , el comportamiento de la animación se basa en la configuración del sistema del usuario. Si se prefiere el movimiento reducido, la animación se omite por completo, estableciendo directamente el estado de la animación en la propiedad to , lo que permite una experiencia accesible.

El segundo gancho useEffect es donde reside la lógica de la animación. Si el usuario no ha indicado una preferencia por el movimiento reducido, el componente configura un temporizador que cambia el estado de la animación from el valor inicial to el valor final después del retraso especificado. Esta transición crea el efecto visual de la animación.

La función de limpieza de este enlace (la declaración de retorno) borra el temporizador, evitando posibles pérdidas de memoria, como si el componente se desmontara antes de que se complete la animación.

La llamada a la función React.createElement es el mecanismo de representación del componente. Crea dinámicamente un elemento HTML basado en el accesorio as , lo que permite el uso del componente en diferentes elementos HTML. El className se construye utilizando la función cn popularizada por shadcn , que combina las clases de utilidad de Tailwind, el className personalizado pasado como accesorio y el estado de animación actual. Esta asignación de clase dinámica es la que aplica los estilos y transiciones deseados al elemento.

Además, hay un atributo style que se puede pasar para establecer directamente propiedades de estilo en el contenedor de animación. La transitionDuration se establece en función de la duration , pero cambia de forma inteligente a 0ms si el usuario prefiere un movimiento reducido, lo que desactiva efectivamente la animación mientras se mantiene la funcionalidad del componente.

Si desea utilizar <AnimateIn/> en su propio proyecto y ya usa shadcn , entonces ya tiene todo lo que necesita, simplemente descargue AnimateIn.tsx y agréguelo a sus componentes.

De lo contrario, querrás instalar Tailwind y mxcn la útil utilidad para fusionar clases de tailwind.

Al igual que shadcn, <AnimateIn/> está pensado para ser un componente reutilizable que puedes copiar y pegar en tus aplicaciones y personalizar según tus necesidades. El código es tuyo.

Además, he creado una bonita página de demostración para jugar a crear diferentes animaciones con <AnimateIn/> en animate-in.vercel.app .

También publicado aquí