4 ms·

Animotion – a visual CSS animation app

375 points by marban 3y ago

zain_saqer 3y ago
This is awesome
ramathornn 3y ago
Wow amazing work, very cool tool. Thanks for sharing!
darepublic 3y ago
nicely done. Glad to see the output is CSS, and not some javascript code tied up in a lib.
darraghmckay 3y ago
This is really intuitive, even on mobile surprisingly
- merelysounds 3y ago
  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 3y ago
    +100 for undo/redo.
  - ispaghetticode 3y ago
    Undo/redo have been added
    - merelysounds 3y ago
      Thanks for adding this, I find it very useful. More feedback: I'd like for undo/redo to move me to the keyframe with the change; similar to how a cursor jumps in a text editor during undo/redo. It's a detail though and perhaps you have other features to work on.
      - ispaghetticode 3y ago
        That's a great suggestion, thank you. I'll definitely work on implementing it
froddd 3y ago
That is so good, works excellently even on mobile. I shall bookmark!
noman-land 3y ago
This is an amazing tool. Incredibly useful. Thank you.
pastage 3y ago
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!
- ispaghetticode 3y ago
  Undo/redo have been added
krebby 3y ago
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 3y ago
Sources at: https://github.com/animotionjs/animotion https://github.com/animotionjs/animotion
- acous 3y ago
  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://cssanimotion.pages.dev/ https://animotion.pages.dev/ https://animotion.pages.dev/
  - ispaghetticode 3y ago
    It's https://animotion.dev https://animotion.dev or https://www.animotion.dev https://www.animotion.dev now
jomoho 3y ago
The first thing I wanted to do was to move around keyframes. It seems like that's not yet a feature.
- ispaghetticode 3y ago
  You can use Cut/Paste to change the keyframe position
poisonborz 3y ago
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 3y ago
  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 3y ago
  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 3y ago
    Anybody in the web animation sector likely already has After Effects, which can be made web-ready with the Lottie plugin.
- christoph 3y ago
  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 http://airbnb.io/lottie/#/supported-features
- MyFirstSass 3y ago
redgetan 3y ago
good stuff. pretty intuitive UI
Narciss 3y ago
Love it!
cloudking 3y ago
This is cool! I've also found GPT-4 is really good at generating complex CSS animations
pindab0ter 3y ago
What a great tool! Got me inspired to play with CSS animations for a bit. I would suggest adding some animation timing functions to the animation presets. Without them, they look a little stale.

375 points by marban 3y ago

zain_saqer 3y ago

This is awesome

ramathornn 3y ago

Wow amazing work, very cool tool. Thanks for sharing!

darepublic 3y ago

nicely done. Glad to see the output is CSS, and not some javascript code tied up in a lib.

darraghmckay 3y ago

This is really intuitive, even on mobile surprisingly

merelysounds 3y ago
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 3y ago
  +100 for undo/redo.
- ispaghetticode 3y ago
  Undo/redo have been added
  - merelysounds 3y ago
    Thanks for adding this, I find it very useful. More feedback: I'd like for undo/redo to move me to the keyframe with the change; similar to how a cursor jumps in a text editor during undo/redo. It's a detail though and perhaps you have other features to work on.
    - ispaghetticode 3y ago
      That's a great suggestion, thank you. I'll definitely work on implementing it

froddd 3y ago

That is so good, works excellently even on mobile. I shall bookmark!

noman-land 3y ago

This is an amazing tool. Incredibly useful. Thank you.

pastage 3y ago

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!

ispaghetticode 3y ago
Undo/redo have been added

krebby 3y ago

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 3y ago

Sources at: https://github.com/animotionjs/animotion https://github.com/animotionjs/animotion

acous 3y ago
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://cssanimotion.pages.dev/ https://animotion.pages.dev/ https://animotion.pages.dev/
- ispaghetticode 3y ago
  It's https://animotion.dev https://animotion.dev or https://www.animotion.dev https://www.animotion.dev now

jomoho 3y ago

The first thing I wanted to do was to move around keyframes. It seems like that's not yet a feature.

ispaghetticode 3y ago
You can use Cut/Paste to change the keyframe position

poisonborz 3y ago

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 3y ago
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 3y ago
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 3y ago
  Anybody in the web animation sector likely already has After Effects, which can be made web-ready with the Lottie plugin.
christoph 3y ago
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 http://airbnb.io/lottie/#/supported-features
MyFirstSass 3y ago

redgetan 3y ago

good stuff. pretty intuitive UI

Narciss 3y ago

Love it!

cloudking 3y ago

This is cool! I've also found GPT-4 is really good at generating complex CSS animations

pindab0ter 3y ago

What a great tool! Got me inspired to play with CSS animations for a bit. I would suggest adding some animation timing functions to the animation presets. Without them, they look a little stale.