Animotion - Aplikasi Animasi CSS Visual

 (cssanimotion.pages.dev)
4 poin oleh GN⁺ 2023-11-26 | 1 komentar | Bagikan ke WhatsApp
  • Judul HN merujuk pada aplikasi animasi CSS visual, tetapi isi halaman yang dapat diverifikasi justru berpusat pada MathML Input dan LaTeX Output
  • Berdasarkan metadata halaman, situs ini diperkenalkan sebagai alat online gratis untuk mengonversi MathML ke LaTeX
  • Informasi penting untuk menilai penggunaan, seperti contoh konversi nyata, hasil keluaran, akurasi, atau cakupan dukungan, sulit ditemukan di isi halaman
  • Di bagian terpisah juga terdapat tautan untuk menjalankan game Drift Hunters Unblocked
  • Dengan informasi yang ada saat ini, sulit memverifikasi secara jelas baik fungsi aplikasi animasi CSS maupun cara kerja konverter MathML

Struktur halaman yang dapat diverifikasi

  • Pada bagian utama atas terdapat seksi MathML Input dan seksi LaTeX Output
  • Deskripsi metadata menyatakan bahwa ini adalah konverter online gratis yang menggunakan MathConvert untuk mengubah MathML menjadi LaTeX
  • Alat ini diperkenalkan sebagai alat konversi rumus untuk pelajar, pendidik, dan peneliti, tetapi kolom input nyata, contoh rumus, atau cakupan MathML yang didukung tidak disediakan

Tautan game yang juga ditampilkan

  • Di bawah Play Online Games terdapat item Drift Hunters Unblocked
  • Item tersebut dijelaskan menawarkan drift yang realistis dan kustomisasi mobil serta dapat dimainkan di sekolah dan tempat kerja
  • Tautan Play Now mengarah ke halaman game

Bacaan terkait

1 komentar

 
GN⁺ 2023-11-26
Komentar Hacker News

  • CSS3 muncul pada 1999, tetapi fakta bahwa aplikasi seperti ini masih cukup menarik untuk muncul di HN pada 2023 menunjukkan betapa stagnannya animasi berbasis keyframe yang mudah, aksesibel, dan bisa diprogram serta diinspeksi
    Flash mati sekitar 10 tahun lalu dan meninggalkan kekosongan, sementara yang tersisa hanyalah cangkang bernama Adobe Animate beserta framework dan komunitas di sekitarnya yang biasa-biasa saja
    Animasi solid berbasis CSS/SVG sebagian besar tetap menjadi janji kosong, dan meskipun ada contoh yang bagus, tetap terasa seperti teknologi untuk bidang yang sempit

    • After Effects bisa mengekspor animasi CSS/SVG/canvas dengan plugin bodymovin/Lottie gratis
      Secara pribadi, ini cara yang paling sering saya pakai saat membuat animasi dan elemen keyframe untuk web
      Memang tidak semua fitur After Effects bisa diekspor, tetapi untuk alur kerja seperti ini, ini adalah solusi terbaik dan paling stabil yang pernah saya temukan. Mungkin pengalaman saya sebelumnya memakai AE juga berpengaruh
      Fitur yang saat ini didukung: http://airbnb.io/lottie/#/supported-features
    • Saya rasa stagnasi ini sebagian besar adalah tanggung jawab Adobe. Saya ingat banyak orang memprediksi hal seperti ini akan terjadi tepat saat Adobe membeli Macromedia
      Adobe adalah perusahaan yang sengaja mematikan sesuatu, dan Steve Jobs juga punya sebagian tanggung jawab
      Sekarang sangat menyenangkan karena tidak perlu lagi memberi mereka uang. Terima kasih, Serif
    • Pada 1999 belum ada Transitions dan Transforms
      Animasi CSS yang benar-benar layak dengan keyframe baru mulai dimungkinkan pada 2009, dan bahkan saat itu dukungan browser masih buruk sehingga perlu banyak prefiks seperti moz-, webkit-, dan polyfill
      Tidak ada alasan kuat untuk repot memakai animasi CSS3 yang tidak berjalan di IE8, dan dalam hal menyediakan animasi UI lintas-browser, jQueryUI jauh lebih unggul
    • Dalam animasi web, ada 5% kasus yang membuat halaman lebih baik dan 95% kasus yang justru membuatnya lebih buruk, jadi saya tidak merasa stagnasi ini masalah besar
      Seumur hidup saya sudah cukup melihat layar “Loading...” milik Flash, dan terutama tidak ingin menunggu hal seperti itu hanya untuk melihat menu navigasi
      Bahkan di lingkungan broadband yang memuat instan, menu navigasi tetap lebih baik tanpa animasi, dan area perkenalan fitur di bawah masthead juga lebih baik tanpa animasi
    • Flash terasa seperti teknologi yang menjembatani masa sebelum internet yang lebih cepat dan murah serta streaming dan hosting video menjadi umum
      Sampai sekarang memang masih ada permintaan, tetapi sudah terlalu niche, dan orang-orang kini terutama mengonsumsi konten lewat perangkat mobile sementara konten media kaya juga sudah cukup disajikan dalam bentuk video

  • Hal pertama yang ingin saya coba adalah memindahkan posisi keyframe, tetapi tampaknya fitur itu belum ada

    • Posisi keyframe bisa diubah dengan cut/paste

  • Saya suka karena hasilnya berupa CSS, bukan kode JavaScript yang terikat pada library

  • Apakah ada cara yang bagus untuk menyediakan tooltip atau petunjuk di mobile agar pengguna tahu fungsi ikon?
    Saya tidak paham arti beberapa ikon dan memang bisa saja ditekan satu per satu, tetapi seperti disebut di atas, tidak ada undo jadi terasa berisiko

    • Undo/redo sudah ditambahkan

  • Editornya tampak sangat intuitif dan bagus
    Kalau seseorang butuh timeline yang lebih canggih, Theatre.js juga layak dilihat. Menyenangkan melihat semakin banyak alat terkait gerakan di platform web

  • Alat yang hebat, sampai membuat saya ingin sebentar bermain-main dengan animasi CSS
    Akan bagus jika preset animasinya ditambah beberapa timing function. Sekarang itu belum ada, jadi terasa agak datar

  • Sumber kodenya ada di sini: https://github.com/animotionjs/animotion

  • Bahkan di mobile pun terasa mengejutkan intuitif

    • Saya bisa langsung mengedit animasinya, lalu menambahkan kesan lentur dengan memperbesar elemen di keyframe agar sesuai dengan gerakannya, dan hasilnya cukup memuaskan
      Hanya saja saya tidak menemukan undo/redo. Apakah fitur seperti itu ada di mobile atau desktop?

  • Saya juga jadi sadar bahwa GPT-4 cukup bagus untuk menghasilkan animasi CSS yang kompleks