Hacker News Re-Imagined

Show HN: Create animations by dragging an element with your mouse

  • 378 points
  • β€’ 9 days ago

  • @panphora
  • Created a post

Show HN: Create animations by dragging an element with your mouse


@micheljansen β€’ 9 days

Replying to @panphora πŸŽ™

Lovely! This reminds me to Cartooners [1], a related but totally different game/toy that I lost many rainy days to as a kid. It was a DOS Application with a library of scenes and actors that you could use to put together short cartoons. When EA was still Electronic Arts...

Wondering if modern day equivalents exist. Has this space been swallowed up wholesale by Roblox or are these kinds of games still being made?

[1] https://www.youtube.com/watch?v=xmjRKd9E7Cw

Reply


@toisanji β€’ 9 days

Awesome work, this is a semi related project I built, but not really: https://concepts.jtoy.net/

How can I contact you?

Reply


@sam1234apter β€’ 9 days

amazing tool - loving it so far

Reply


@sarwech β€’ 9 days

This is really cool. As others have said I'd love to see an option to output a GIF and additional animation options.

Reply


@ljm β€’ 9 days

This is nice, it reminds me of how OpenShot Video handles animations by default.

Reply


@panphora β€’ 9 days

Hi HN,

This idea has been a dream of mine for years [0]. As a web developer, I never learned After Effects or any other complex animation software.

But I've always dreamed of creating interactive demos and animations just by using my natural mouse movements. It just feels right.

So last week I took a few days off from my main project to create Animatize [1], a proof-of-concept showing off the idea of using natural movement to create an animation.

I'd love to know what you think.

[0] http://motioncomicbuilder.storylog.com/

[1] https://github.com/panphora/animatize

Reply


@Linkd β€’ 9 days

Love it, but this needs to be able to output GIFs I can easily copy and share on slack, etc. (Unless I missed out how to do that entirely?)

Reply


@pizzabearman β€’ 9 days

I love the how quick and easy it gets right to the point

Reply


@appliku β€’ 9 days

That's pretty cool. I always thought animation making should look like this, not million of layers and dots. GJ!

Reply


@mrhektor β€’ 9 days

This is such a cool project. Quick suggestion: would be nice to have some way of "smoothening" the animations; I think a simple interface for that would make it a lot more usable in practice. The human hand is a bit shaky :)

Anyway, bookmarked!

Reply


@ricardobeat β€’ 9 days

Has anyone tried to create a modern version of Flash / Director? Feels like those tools had already solved these problems nicely 20 years ago.

Reply


@can16358p β€’ 9 days

Remindes me of the video Inventing on Principle by Bret Victor.

Reply


@howaboutnope β€’ 9 days

> Copy and paste this code into your website where you want this animation to appear

Sorry to go on a tangent (I think your project is awesome!), but this is why I love the web. So much.

Reply


@indiantinker β€’ 9 days

So cool! Congratulations

Reply


@TuringTest β€’ 9 days

Drawing and recording a line path following the movement of the pointer is an extremely simple interaction exercise, and one of the first you learn when programming games or in the demoscene. The sad thing is that, once the base logic is created, the platforms we use make it quite difficult and a lot of effort to transform it into a finished deliverable product.

This project is an interesting effect, but it would be great if doing such effort were simply the natural way to use the available tools.

Reply


@natovan β€’ 9 days

Always thought about this too. Also interesting if this is possible as a plugin for Vegas or Premiere

Reply


@uxamanda β€’ 9 days

This is great! As someone who has dealt with After Effects (and Flash) this feels like a great stepping stone tool.

Looking at the output code, it seems like you could have an edit mode that displays the Animation History as numbered "dots" on the background to let someone click and move or remove a dot. Then you start to expose things like time between dots, and soon enough you've taught the basics of tweeting. :-)

Reply


@rjtavares β€’ 9 days

I make a lot of animations in python using matplotlib (and moviepy for editing)[1]. It works pretty well for data based stuff but requires a lot of trial and error and tricks to get the feel right.

There's definitely space for a python based simple motion graphics package.

[1] An example: https://www.youtube.com/watch?v=Abo7NZZ8VHs

Reply


@cuttysnark β€’ 9 days

This is great. Do you have plans to expand the controls or animation options? For example, adding pauses, or additional animation types like scale or rotate. Thanks for sharing this project.

Reply


@daenz β€’ 9 days

This is what ergonomics looks like. Even small children can convey the movement of actors through space using similar techniques. It's an extremely natural way to communicate how something moves. But we have lost that basic idea in favor of very precise animation tools and the complexity that comes with them.

Reply


@tehwebguy β€’ 9 days

Very cool!

Does anyone know if something like this exists for video? Like "motion tweening" but with my mouse in real time?

Reply


@cercatrova β€’ 9 days

Didn't you also start doing 31 launches in January? How's that been going? I see animatize is one of your projects.

https://31launches.com/

Reply


@sucrose β€’ 9 days

It's broken for me, main.jsΒΉ fails to load due to the server response: ERR_TOO_MANY_REDIRECTS

ΒΉ https://animatize.com/js/main.js?v=131

Reply


@roguas β€’ 5 days

This is amazing. I would use it. A lot of content creators would use it. Some would pay.

Keep going, I guarantee its going somewhere. I was thinking of making desktop app like that for myself. This being html5 makes it even better.

Reply


About Us

site design / logo Β© 2022 Box Piper