✨ Nueva librería JS minimalista para animaciones estilo utility-first
Me he cruzado con una librería muy curiosa: USAL
👉 https://usal.dev/
👉 https://github.com/usaljs/usal
La idea es súper simple: animaciones declarativas con un enfoque utility-first, muy en la línea mental de quienes trabajamos con Tailwind o sistemas de diseño basados en pequeñas piezas combinables.
✅ Lo más interesante: se usa como atributo
En vez de montar configs complejas o escribir mucha lógica, pones las “clases” de animación como un atributo en el HTML:
<div data-usal="zoomin duration-800 delay-200">Zoom in</div>
Esto hace que sea muy fácil:
- aplicar animaciones por componente,
- mantener el markup como fuente de verdad,
- y evitar dependencias pesadas para microinteracciones.
📦 Tamaño muy contenido
Otro punto a favor: ocupa aproximadamente 8KB, así que encaja bien en proyectos donde quieres añadir “vida” a la UI sin meter un monstruo de JS.
Interesante, pero, ¿se pueden disparar con el scroll?
Luis Muñoz Si si, habra que probarla... Voya ver con la pagina mia a ver que tal funciona
Luis Muñoz Si quieres la probamos con la pagina que tanto dolor de cabeza te da
Angel Julian Perfecto, cuando quieras lo vemos.
He estado probando diferentes movimientos, y en generla va bien, pero tengo algún problema...
En una página donde estoy haciendo pruebas (https://yuntas.eu/life-co2rk/acciones-test/), hay un loop de artículos, que aparecen de forma escalonada aplicando USAL (split-item split-fade-u blur-1 duration-800 split-delay-500), En Desktop va muy bien, pero en el móvil, en Android, no se muestran los artículos. No es que no haga el efecto de animación, sino que no aparece nada: no cargan los post del loop.
¿Alguna sugerencia? ¿Hay alguna forma de indicar que esta animación no se aplique en el móvil?
Gracias.
Luis Muñoz le daremos un vustazo ;-)
estoy creando una pagina para facilitar la creacion de animaciones, aun esta en fase temprana pero ya esta publica y se puede probar.
https://usal.flowtitude.com/
Luis Muñoz en general te esta fallando en el movil, por un error de JS, estas usando tambien la libreria intersect para tailwind?
Puede ser. Tenía en esa página una animación en la cabecera dele texto con Motion de Rombo, pero también lo tengo en otras páginas. Pero ahora lo que me ocurre es que no me guarda los cambios, no compila bien WindPress
Vaya si quieres lo vemos esta tarde en un ratito