Complete the sentence

Contexto

Completar la oración arrastrando palabras es un recurso habitual en el diseño de e-learning. Quería construir una completamente por mi cuenta — desde la lógica de interacción hasta la animación — como referente de mi oficio, independiente de las herramientas de autor que usaba en el trabajo.

Rol

Diseñador de interacción y único desarrollador. Diseñé los estados UX, escribí toda la lógica de arrastrar y soltar desde cero en JS, y manejé la capa de animación con GSAP.

Proceso

• Mapeé cada estado de la interacción: inactivo, arrastrando, soltar correcto, soltar incorrecto y completado — luego diseñé feedback visual y animado distinto para cada uno.
• Construí la lógica de arrastrar y soltar en JavaScript puro, migrando deliberadamente desde una referencia en jQuery para aprender y aplicar los equivalentes modernos — pointer events, posicionamiento de elementos, detección de colisión.
• Agregué animaciones GSAP sobre la lógica — soltar, reiniciar, la secuencia de completado — para que la interacción se sintiera fluida y no mecánica.

Resultado

Una interacción de e-learning limpia y reutilizable, construida sin herramientas de autor. El aprendizaje clave: la disciplina de migrar una implementación legacy de jQuery a JS moderno — entendiendo qué hace cada línea, en vez de heredar patrones a ciegas.