AnimXYZ

Hay bastantes bibliotecas de animación CSS . Suelen ser un montón de nombres de clases que puedes aplicar según sea necesario, como “rebotar” o “deslizar hacia la derecha” y… hará esas cosas. Suelen ser bastante testarudos, con buenos valores predeterminados y no especialmente diseñados en torno a la personalización.

Parece que AnimXYZ está diseñado para ser altamente personalizable y se autodenomina “el primer kit de herramientas de animación CSS componible”.

Utiliza tantos bits componibles diferentes como necesites para obtener la animación de entrada/salida que deseas. Juega con su constructor y verás resultados como:

div   xyz="tall-2 duration-6 ease-out-back stagger-1 skew-left-2 big-25% fade-50% right-5"  div/div  div/div  div/div/div

El nombre de la clase xyz-outactiva xyz-inla animación opuesta.

No me encanta cuando las bibliotecas usan atributos HTML inventados para controlarse. Es poco probable que se utilicen estándares web xyzen el futuro, pero quién sabe, y si esto se aplica en suficientes sitios de producción, esa puerta se cerrará para siempre. Pero peor aún, anima a otras bibliotecas a hacer lo mismo.

Todos esos valores de atributos recuerdan a Tailwind . Para utilizar Tailwind de forma eficaz, el proceso de compilación ejecuta PurgeCSS para eliminar todas las clases no utilizadas, que servirán para una pequeña fracción del conjunto completo de clases que ofrece Tailwind. Pienso en eso porque la hoja de estilo procesada de AnimXYZ está comprimida ~9,7 kB , que es más grande que el tamaño del archivo que Tailwind usa como ejemplo en su página de marketing. El punto es que, si se usaran clases, probablemente habría una forma más sencilla de eliminar las clases no utilizadas , lo que apuesto a que haría que el tamaño fuera casi insignificante. Quizás el uso específico del marco de JavaScript sea más inteligente.

Pero aparte de esas críticas, ¡es genial! No solo hay valores predeterminados inteligentes que son altamente componibles, sino que usted tiene el 100% de control a través de las Propiedades personalizadas de CSS.

No se pierda el botón de rayos XYZ en la parte inferior derecha del sitio web que le permite ver qué animaciones impulsan qué elementos. También está en los documentos que son súper buenos .

Hay algo bueno en las animaciones declarativas. Recuerdo haber conversado con Matt Perry sobre Framer Motion y haber disfrutado de su enfoque.