[HN Gopher] Animotion - a visual CSS animation app
___________________________________________________________________
Animotion - a visual CSS animation app
Author : marban
Score : 339 points
Date : 2023-11-24 11:16 UTC (1 days ago)
(HTM) web link (cssanimotion.pages.dev)
(TXT) w3m dump (cssanimotion.pages.dev)
| zain_saqer wrote:
| This is awesome
| ramathornn wrote:
| Wow amazing work, very cool tool. Thanks for sharing!
| darraghmckay wrote:
| This is really intuitive, even on mobile surprisingly
| merelysounds wrote:
| Agreed.
|
| I was able to instantly edit an animation and add a "squishy"
| feel - by stretching the element at the keyframes, according to
| its motion; very satisfying.
|
| One thing I couldn't find is undo/redo. Is it there on mobile
| (or desktop for that matter)?
| noman-land wrote:
| +100 for undo/redo.
| darepublic wrote:
| nicely done. Glad to see the output is CSS, and not some
| javascript code tied up in a lib.
| froddd wrote:
| That is so good, works excellently even on mobile. I shall
| bookmark!
| noman-land wrote:
| This is an amazing tool. Incredibly useful. Thank you.
| pastage wrote:
| Are there any goodways of doing tool tips or hint what icons do
| on mobile? I do not understand what some icons do, I can test but
| as is said above no undo!
| krebby wrote:
| This looks great! I love how intuitive the editor is.
|
| For those who need a bit more advanced timeline, check out
| Theatre.js. Nice to see more motion on the web platform!
| rapnie wrote:
| Sources at: https://github.com/animotionjs/animotion
| acous wrote:
| This is a different Animotion -- a Revealjs wrapper written in
| Svelte by "Joy of Code" from Youtube.
|
| I guess from the URLs that the Svelte project predates this
| one:
|
| https://cssanimotion.pages.dev/ https://animotion.pages.dev/
| jomoho wrote:
| The first thing I wanted to do was to move around keyframes. It
| seems like that's not yet a feature.
| poisonborz wrote:
| The fact that CSS3 was released in 1999 and such an app in 2023
| is a cool HN-worthy post shows how easy,
| accessible/programmable/inspectable keyframe based animation got
| stuck with not much relief in sight. Flash dropped dead like a
| decade ago leaving a void, what remains is its husk as Adobe
| Animate, and droves of so-so frameworks and communities around
| them. Robust CSS/SVG based animation remained mostly an empty
| promise. You can find nice examples, sure, but it remains a niche
| craft.
| mandmandam wrote:
| I squarely blame Adobe for this stagnation, because I remember
| _many_ people predicting that _exactly this_ would happen when
| they bought Macromedia. Adobe just kills things, on purpose.
| Steve Jobs gets a side-order of blame.
|
| So happy I don't give those shits money any more. Thanks Serif!
| cantSpellSober wrote:
| Browser support has come a long way in this time period as
| well.
|
| Now we have the tech, and the demand, why _aren 't_ there more
| competitors?
| rchaud wrote:
| Anybody in the web animation sector likely already has After
| Effects, which can be made web-ready with the Lottie plugin.
| christoph wrote:
| Worth mentioning that After Effects can export CSS/SVG/canvas
| animations with the free bodymovin/Lottie plugin. This is my
| personal go to for creating web key frame animations and
| elements.
|
| Not every after effects feature is exportable, but it's the
| best and most reliable solution I've found for this type of
| workflow, maybe due in part though to my previous experience
| with AE.
|
| Currently supported features:
| http://airbnb.io/lottie/#/supported-features
| MyFirstSass wrote:
| I've ended up using GSAP in this vacuum for sequencing.
|
| It's a weird heir for all things animation on the web these
| days, it works great but something about the
| keyframing/sequencing process seems like it should be supported
| natively.
| rchaud wrote:
| Transitions and Transforms weren't available in 1999. Proper
| CSS animation with keyframes was first available in 2009 and
| even then browser support wasn't great -- lots of polyfills
| like 'moz-' and 'webkit-' were required.
|
| jQueryUI was miles ahead in terms of delivering cross-browser
| compatible UI animation, so why bother with CSS3 animation
| which wouldn't work on IE8?
| no_wizard wrote:
| A modern jQuery UI could go such a long way.
|
| I suppose Bootstrap fits this bill in a lot of ways but I
| feel like jQuery UI was even easier
| rudasn wrote:
| Problem with jQuery UI was that it was bloated and came
| right at a time where bootstrap was taking off, IIRC.
| jQuery mobile didn't help much either.
|
| The theming support was kind of nice though.
| pcurve wrote:
| I feel like Flash was a technology that served to bridge the
| gap until faster cheaper internet and video streaming / hosting
| became mainstream.
|
| These days, the demand is still there, but too niche, with
| people primarily using mobile device for content consumptions,
| and plenty of rich media content available in form of videos.
| jokethrowaway wrote:
| CSS as an animation spec is simply inferior so we failed to
| create an open community of people who cared enough about it -
| and people kept using other solutions
| unsupp0rted wrote:
| I have no problem with this. Animation on the web improves a
| page 5% of the time and makes it worse 95% of the time.
|
| I don't need to see any more Flash "Loading..." screens in my
| lifetime, especially just to see nav menus.
|
| Even with instant broadband loading, the nav menu is better
| when it's not animated. The post-masthead features section is
| better when it's not animated.
| redgetan wrote:
| good stuff. pretty intuitive UI
| Narciss wrote:
| Love it!
___________________________________________________________________
(page generated 2023-11-25 23:01 UTC)