-
Origin-aware animation: An element animates out of its trigger, like a popover growing from the button that opened it instead of from its own center which is the default in CSS.
- Related: Transform origin is the anchor point a scale or rotation grows or spins from. It's the CSS property that makes this work.
-
Rubber-banding: Resistance and snap-back when you drag past a boundary (the iOS overscroll feel).
-
Number ticker: Digits rolling or counting up to a value.
- Pair it with Tabular numbers, which are fixed-width digits so numbers don't shift around as they change. They're essential for tickers, timers, and counters.
-
Skeleton / Shimmer: A placeholder with a moving sheen shown while content loads.
-
Parallax: Background and foreground move at different speeds while scrolling, creating depth.
-
Momentum: Motion that carries velocity, especially after a drag or interruption.
- Related: Velocity is how fast and in which direction an element is moving. A spring carries it into the next animation when interrupted, so a flicked element keeps its speed.
- Related: Drag is moving an element by grabbing it, often with momentum when released.
Test run: six loose descriptions of motion effects. Each returned the glossary term, with related terms where they apply. Short run; the glossary is a fixed list, so effects outside it get an approximation.
Qué hace
Un glosario de consulta inversa para animación web. Describes lo que ves o percibes («con rebote», «se desliza fuera», «se dibuja solo») y devuelve el término que corresponde con su definición, primero la coincidencia más exacta y, además, una o dos alternativas cercanas y en qué se diferencian (por ejemplo, Clip-path frente a Mask, o Pop in frente a Bounce). Cita el glosario tal como está redactado, indica con claridad cuando nada encaja exactamente y se ciñe a su propia lista en lugar de inventar términos. El glosario abarca entradas y salidas, secuenciación, transformaciones, transiciones entre estados, desplazamiento, feedback, curvas de aceleración, muelles, movimiento en bucle, efectos de acabado, rendimiento y principios de animación.
Salida
El término, una definición de una línea y, cuando resulte útil, las alternativas más cercanas.
Ideal para
Desarrolladores, diseñadores y redactores que saben qué efecto quieren pero no cómo se llama, y buscan la palabra adecuada para pedírselo a un diseñador o a una IA.
Riesgo bajo: solo instrucciones, sin scripts, sin acceso a la red y sin escritura de archivos. Es un glosario fijo, así que un efecto que no esté en la lista recibe una aproximación o una indicación clara de que falta el término. Se probó una vez con seis descripciones imprecisas: cada una devolvió un término del glosario, con términos relacionados cuando correspondía. Cuando se invoca sin ninguna pregunta, solo responde con un saludo. Por Emil Kowalski, MIT.