Animotion - app visual de animaciones CSS

 (cssanimotion.pages.dev)
4 puntos por GN⁺ 2023-11-26 | 1 comentarios | Compartir por WhatsApp
  • El título en HN apunta a una app visual de animaciones CSS, pero el contenido verificable de la página se centra en MathML Input y LaTeX Output
  • Según los metadatos de la página, este sitio se presenta como una herramienta en línea gratuita para convertir MathML a LaTeX
  • En el cuerpo es difícil encontrar información útil para evaluar su uso, como ejemplos reales de conversión, resultados de salida, precisión o alcance de compatibilidad
  • En una sección aparte también aparece un enlace para ejecutar el juego Drift Hunters Unblocked
  • Con la información disponible actualmente, es difícil verificar con claridad tanto la función de app de animaciones CSS como el funcionamiento del convertidor de MathML

Estructura verificable de la página

  • En la parte superior del contenido hay una sección de MathML Input y otra de LaTeX Output
  • La metadescripción indica que es un convertidor en línea gratuito que usa MathConvert para convertir MathML a LaTeX
  • Se presenta como una herramienta de conversión de fórmulas para estudiantes, docentes e investigadores, pero no se muestran campos de entrada reales, fórmulas de ejemplo ni el rango de MathML compatible

Enlace de juego mostrado junto al contenido

  • Debajo de Play Online Games aparece el elemento Drift Hunters Unblocked
  • Ese elemento indica que ofrece derrapes realistas y personalización de autos, y que funciona en la escuela y en el trabajo
  • El enlace Play Now lleva a la página del juego

Lecturas relacionadas

1 comentarios

 
GN⁺ 2023-11-26
Comentarios de Hacker News

  • Aunque CSS3 salió en 1999, que una app así siga siendo lo bastante interesante como para aparecer en HN en 2023 muestra lo estancadas que han estado las animaciones basadas en keyframes que sean fáciles, accesibles, programables e inspeccionables.
    Flash murió hace unos 10 años y dejó un vacío; lo que quedó fue la cáscara de Adobe Animate y frameworks y comunidades más bien mediocres a su alrededor.
    Las animaciones sólidas basadas en CSS/SVG quedaron en su mayoría como promesas vacías, y aunque hay buenos ejemplos, siguen siendo casi una tecnología de nicho.

    • After Effects puede exportar animaciones CSS/SVG/canvas con el plugin gratuito bodymovin/Lottie.
      Personalmente, es el método que más uso para crear animaciones y elementos web con keyframes.
      No permite exportar todas las funciones de After Effects, pero para este flujo de trabajo ha sido la mejor y más estable solución que encontré. Quizá también influyó que ya había usado AE antes.
      Funciones compatibles actualmente: http://airbnb.io/lottie/#/supported-features
    • Creo que gran parte de este estancamiento es responsabilidad de Adobe. Recuerdo que mucha gente predijo que pasaría exactamente esto cuando Adobe compró Macromedia.
      Adobe es una empresa que mata cosas deliberadamente, y Steve Jobs también tiene parte de la culpa.
      Me alegra mucho ya no tener que darles dinero. Gracias, Serif.
    • En 1999 no existían Transitions ni Transforms.
      Las animaciones CSS propiamente dichas con keyframes recién fueron posibles por primera vez en 2009, y aun entonces el soporte de navegadores no era bueno, por lo que hacían falta muchos prefijos como moz- y webkit-, además de polyfills.
      No había muchas razones para usar animaciones CSS3 que no funcionaran en IE8, y jQueryUI iba muy por delante en cuanto a ofrecer animaciones de UI entre navegadores.
    • Las animaciones web mejoran una página en 5% de los casos y la empeoran en 95%, así que no siento que este estancamiento sea un gran problema.
      No quiero volver a ver pantallas de “Loading…” de Flash en toda mi vida, y mucho menos tener que esperar eso para ver un menú de navegación.
      Incluso en un entorno de banda ancha donde todo carga al instante, los menús de navegación son mejores sin animaciones, y las secciones de presentación de funciones debajo del masthead también son mejores sin animaciones.
    • Flash se siente como una tecnología que cubrió el hueco hasta que se popularizaron el internet más rápido y barato y el streaming y hosting de video.
      Todavía hay demanda hoy, pero se volvió demasiado de nicho; la gente consume contenido sobre todo en dispositivos móviles, y el contenido multimedia rico ya se puede ofrecer suficientemente en forma de video.

  • Lo primero que quise probar fue mover la posición de los keyframes, pero todavía no parece existir como función.

    • Puedes cambiar la posición de los keyframes cortando y pegando.

  • Me gusta que el resultado sea CSS y no código JavaScript atado a una librería.

  • ¿Habrá alguna buena forma de ofrecer tooltips o pistas en móvil para explicar qué hacen los íconos?
    Algunos íconos no sé qué significan, y aunque se puede probar tocándolos, como dijeron arriba, pesa un poco que no haya deshacer.

    • Se agregaron deshacer/rehacer.

  • El editor se ve realmente intuitivo y bueno.
    Para quienes necesiten una línea de tiempo más avanzada, también vale la pena revisar Theatre.js. Da gusto ver que haya más herramientas relacionadas con movimiento en la plataforma web.

  • Es una gran herramienta y me dieron ganas de jugar un rato con animaciones CSS.
    Estaría bueno agregar algunas funciones de temporización a los presets de animación. Ahora mismo, al no tenerlas, se ven un poco planas.

  • El código fuente está aquí: https://github.com/animotionjs/animotion

  • Es sorprendentemente intuitivo incluso en móvil.

    • Pude editar la animación directamente y agregar una sensación elástica estirando elementos en los keyframes según el movimiento, y quedé bastante satisfecho.
      Eso sí, no encontré deshacer/rehacer. ¿Existe esa función en móvil o en escritorio?

  • También descubrí que GPT-4 es bastante bueno para generar animaciones CSS complejas.