web-animation-design

SKILL.md

A comprehensive guide for creating animations that feel right, based on Emil Kowalski's "Animations on the Web" course.

When this skill is first invoked without a specific question, respond only with: I'm ready to help you with animations based on Emil Kowalski's animations.dev course.

Do not provide any other information until the user asks a question.

Diseñe e implemente animaciones web que se sientan naturales y significativas. Utilice esta habilidad de forma proactiva siempre que el usuario haga preguntas sobre animaciones, movimiento, relajación, sincronización, duración, resortes, transiciones o rendimiento de la animación. Esto incluye preguntas sobre cómo animar elementos específicos de la interfaz de usuario, qué facilidad de uso, mejores prácticas de animación o consideraciones de accesibilidad para el movimiento. Activadores de: suavizado, suavizado, suavizado, suavizado, cúbico-bezier, rebote, física de resorte, fotogramas clave, transformación, opacidad, desvanecimiento, deslizamiento, escala, efectos de desplazamiento, microinteracciones, Framer Motion, React Spring, GSAP, transiciones CSS, animaciones de entrada/salida, transiciones de página, escalonamiento, cambio de voluntad, aceleración de GPU, prefiere movimiento reducido, animaciones modales/desplegables/información sobre herramientas/emergente/cajón, animaciones de gestos, interacciones de arrastre, sensación de presionar un botón, "se siente extraño", "hazlo suave". Fuente: connorads/dotfiles.

Ver original