Animotion - विज़ुअल CSS animation app

 (cssanimotion.pages.dev)
4 पॉइंट द्वारा GN⁺ 2023-11-26 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • HN title विज़ुअल CSS animation app की ओर इशारा करता है, लेकिन verify की जा सकने वाली page content मुख्यतः MathML Input और LaTeX Output पर केंद्रित है
  • page metadata के अनुसार यह site MathML को LaTeX में बदलने वाले free online tool के रूप में पेश की गई है
  • actual conversion examples, output results, accuracy, supported scope जैसी decision-making information body में confirm करना मुश्किल है
  • एक अलग area में Drift Hunters Unblocked game launch link भी शामिल है
  • मौजूदा जानकारी के आधार पर CSS animation app functionality और MathML converter का working method, दोनों को साफ़ तौर पर verify करना मुश्किल है

verify की जा सकने वाली page structure

  • top body में MathML Input section और LaTeX Output section है
  • meta description बताता है कि यह MathConvert का उपयोग करके MathML को LaTeX में बदलने वाला free online converter है
  • इसे students, educators और researchers के लिए equation conversion tool के रूप में पेश किया गया है, लेकिन actual input field, example equations या supported MathML scope उपलब्ध नहीं हैं

साथ में दिख रहा game link

  • Play Online Games के नीचे Drift Hunters Unblocked item है
  • यह item बताता है कि game realistic drifting और car customization देता है और school व workplace में चलता है
  • Play Now link से game page पर जा सकते हैं

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2023-11-26
Hacker News की रायें

  • CSS3 के 1999 में आने के बावजूद 2023 में ऐसी app का HN पर आना दिलचस्प है, यह दिखाता है कि आसान, accessible और programming/inspection के लायक keyframe-based animation कितना ठहरा हुआ था
    Flash करीब 10 साल पहले मर गया और एक खाली जगह छोड़ गया; पीछे बचा Adobe Animate का खोल और उसके आसपास के बस ठीक-ठाक frameworks और communities
    CSS/SVG-based मजबूत animation ज्यादातर खाली वादा ही रहा, और अच्छे examples होने के बावजूद यह अब भी एक संकरे niche की तकनीक जैसा है

    • After Effects मुफ्त bodymovin/Lottie plugin के साथ CSS/SVG/canvas animation export कर सकता है
      व्यक्तिगत रूप से web keyframe animation और elements बनाने के लिए मैं ज्यादातर यही तरीका इस्तेमाल करता हूं
      After Effects की सारी capabilities export नहीं हो सकतीं, लेकिन इस workflow में यह मुझे मिला सबसे अच्छा और भरोसेमंद solution रहा है। हो सकता है AE पहले इस्तेमाल करने का मेरा अनुभव भी असर डालता हो
      मौजूदा supported features: http://airbnb.io/lottie/#/supported-features
    • इस ठहराव के लिए Adobe काफी जिम्मेदार है, ऐसा मुझे लगता है। याद है, जब Adobe ने Macromedia खरीदा था, तो कई लोगों ने ठीक ऐसी ही चीज होने की भविष्यवाणी की थी
      Adobe जानबूझकर चीजों को खत्म करने वाली company है, और Steve Jobs की भी कुछ जिम्मेदारी है
      अब उन्हें पैसे न देने पड़ना वाकई अच्छा है। Serif का धन्यवाद
    • 1999 में Transitions और Transforms नहीं थे
      keyframes वाली ठीक-ठाक CSS animation पहली बार 2009 में ही संभव हुई, और तब भी browser support अच्छा नहीं था, इसलिए moz-, webkit- जैसे prefixes और polyfills की बहुत जरूरत पड़ती थी
      IE8 पर न चलने वाली CSS3 animation इस्तेमाल करने की कोई खास वजह नहीं थी, और cross-browser UI animation देने के मामले में jQueryUI बहुत आगे था
    • web animation pages को बेहतर 5% मामलों में बनाता है और खराब 95% मामलों में, इसलिए यह ठहराव मुझे बड़ी समस्या नहीं लगता
      जिंदगी भर Flash की “Loading…” screen और नहीं देखना चाहता, खासकर navigation menu देखने के लिए उसका इंतजार करने की जरूरत तो बिल्कुल नहीं
      तुरंत load होने वाले broadband माहौल में भी navigation menu बिना animation के बेहतर होते हैं, और masthead के नीचे feature-introduction area भी बिना animation के बेहतर होता है
    • Flash ऐसा लगता है जैसे उसने तेज और सस्ते internet और video streaming/hosting के popular होने से पहले की gap को भरा था
      आज भी demand है, लेकिन यह बहुत niche हो गया है, और लोग मुख्यतः mobile devices पर content consume करते हैं, जबकि rich media content भी video के रूप में पर्याप्त रूप से दिया जा सकता है

  • सबसे पहले मैं keyframe position को move करना आजमाना चाहता था, लेकिन यह अभी feature के रूप में मौजूद नहीं लगता

    • cut/paste करके keyframe position बदली जा सकती है

  • अच्छा है कि output किसी library से बंधा JavaScript code नहीं बल्कि CSS है

  • mobile पर icons क्या करते हैं, यह बताने वाले tooltips या hints अच्छे तरीके से देने का कोई उपाय है क्या?
    कुछ icons का मतलब समझ नहीं आता और दबाकर देखा जा सकता है, लेकिन जैसा ऊपर कहा गया, undo नहीं है, इसलिए दबाव लगता है

    • undo/redo जोड़ दिया गया है

  • editor सच में intuitive और अच्छा दिखता है
    जिन्हें थोड़ी ज्यादा advanced timeline चाहिए, वे Theatre.js भी देख सकते हैं। web platform पर motion से जुड़े tools और बढ़ना अच्छा है

  • शानदार tool है, इससे थोड़ी देर CSS animation के साथ खेलकर देखने का मन हो गया
    animation presets में कुछ timing functions जोड़ना अच्छा रहेगा। अभी वे नहीं हैं, इसलिए यह थोड़ा सपाट लगता है

  • source यहां है: https://github.com/animotionjs/animotion

    • यह दूसरा Animotion है। YouTube के “Joy of Code” ने Svelte में बनाया हुआ Revealjs wrapper है
      URL देखने पर लगता है कि Svelte project इस project से पहले था
      https://cssanimotion.pages.dev/
      https://animotion.pages.dev/

  • mobile पर भी हैरान करने वाला intuitive है

    • animation को सीधे edit करके, movement के हिसाब से keyframes पर elements को stretch करते हुए squishy feel जोड़ पाया और यह काफी संतोषजनक था
      हालांकि undo/redo नहीं मिला। mobile या desktop पर ऐसा feature है क्या?

  • पता चला कि GPT-4 भी complex CSS animation generate करने में काफी अच्छा है