Show HN: Create animations by dragging an element with your mouse | Hacker News Reader

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

animatize.com

379 pointspanphora57 comments

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

What a cool project. You can really fit a lot of concepts into such a refined approach to animation. Thank you for sharing your result with us, I hope you are having fun with it too.

Thanks a lot. This is as tiny and as productive animations could get. I'm literally tired of opening applications to do small animation pizzaz.

Spent more $ on animation creators with lifetime deals that suck my life out.

Animated gifs as background work perfectly ... this is going to be fun!

Thanks again!

This is really amazing! There's a steep learning curve to do creative work & this is certainly a step in the right direction of WYSIWYG instead of needing to know tool specific operators etc.

FWIW it's called Motion sketch in After effects and it's basically the same thing. It allows you to edit the curve after though.

thanks - love it, nice, simple and effective

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!

Agreed with the suggestion. OP, one cheap trick you can do without having to get into smoothing algorithms is to just make the mouse position affect the velocity of the object rather than the position. It makes it a little more difficult to control but isn't hard to get used to. This was the mouse control method for your spaceship on an old 2d mac game called Crystal Quest[1] and it gives a slight rubber band feeling to the movement.

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

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.

I've noticed that "animating with mouse" has become an animation style of it's own on youtube recently. Mostly in comedic contexts which does look quite charming but in education videos as well which seems to be very functional.

An easy way to achieve this style in video is to fire up gimp (or some other image editor) and hide cursor in the recording software.

This sounds like a great real-time teaching style.

Can you point us to the videos you're talking about?

This meme[1] is pretty famous but doesn't hide the cursor or anything. There are a few others like it, I've never seen an educational video done like that though

[1]: https://www.youtube.com/watch?v=J-fXTRHApRc

How do they manage to move multiple “cutouts” independently at the same time, using the mouse? Especially when they’re overlapping. Green screen multiple recordings, and then merge them? Or is there a simpler explanation?

The video is highly edited, it just appears to be a single screen recording.

Yes since the background image is static you don't need a greenscreen. From watching just once, I think the guy never overlaps his clone(s). So you make two separate versions where their bounding boxes won't overlap (requires some planning) and then just show the left two-thirds of the bg image with guy 1, and the right one-third with guy 2, divided by a simple vertical cut.

And the overall zooming/panning is done after the merging. That's how I'd approach it.

That was… hypnotic, no other word for it. Thanks for the discovery.

This reminds me of a video game I played as a kid. Opening Night. You could create plays, dialog, etc and have your characters act for you. You could just choose where they walked and then had a bunch of emotes they could do.

So fun to be so creative making plays!

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. :-)

That's how I generated the red dots in the demo at the top of the page actually! I rendered one dot for every 10 movements and then ran some JS that would delete any element I clicked on.

I never though of that as a way to edit the underlying animation though... that's smart! The dots would be pretty close together though, so you might need a zoom control too.

Very cool idea, thank you! I'm gonna think more about this.

Did you mean tweening? I haven’t heard of tweeting used in the context of animation.

Ha! Yes, the forever battle with auto correct. Although I'm sure it could be made to auto-tweet :-P

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/

I did.

It's been one of my better decisions. I have so many projects that are 80% complete that I've just been too embarrassed to post.

31 launches is meant to help me get past that fear/hesitation.

But creating Animatize took 18 hours of my week last week and just completely wore me out. I had to take 5 days off just to recuperate and get back on track.

If it makes you feel any better, it takes me 18 hours to figure out how to write a for loop.

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

I dream of a day when my day-to-day tools feel more like the tools in that video.

I have some hope VR will bring us closer.

I'm really excited about the user interface possibilities that AR/VR will bring.

It may literally create whole new industries.

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?)

Not OP, but I thought you might be able to use a canvas export, but alas the output is still javascript. My quick hack on a Mac would be QuickTime screen record + ffmpeg :-)

SVG would be cool too :)

If SVG is supported as an input type too (good for rotating/scaling), then the output of the tool could all be editable text.

I guess building an IDE for that wouldn't make sense, but it would be nice to generate an HTML page that has all of the assets defined within it, as a single file.

Yes, that's next on the list.

Just trying to get a proof-of-concept out with this first version.

Btw, if anyone knows of a good way to stitch together two images into a gif by passing in coordinates (even a paid API for this), I'd love to know about it.

ImageMagick might work well for making gifs.

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.

Seeing this project get some traction has made me hopeful about its future, so I might just do that!

Finding an intuitive interface for adding advanced features should be interesting, for sure.

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

What animation options (other than GIF export) are you craving? I've heard pausing, deleting frames, and rotating so far.

I'll probably work on the GIF export next, but I'm low on time this month since I'm trying to get 31 projects out the door [0].

[0] https://31launches.com

I want to change the speed. [Edit: Now I see that I can vary the speed in my initial drag.]

Have securtiy concerns putting this on my website. Can nasties be hidden in the code?

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

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

How can I contact you?

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

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.

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

It seems intermittent, it worked a couple of times

Should be fixed now. I think it was caused by having flexible SSL enabled in Cloudflare.

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.

> 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.

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

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

Very cool!

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

After Effects has a feature called "motion sketch" which does this for video. It's a little bit harder to get up and running, though.

Hey, maybe it will be helpful if you need a video from website/saas. I'm working on an app, that can turn website into a motion video.

Example gif: https://ibb.co/w4h7FVD

Link: https://talevideo.com

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

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

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

So cool! Congratulations

amazing tool - loving it so far

Reply on news.ycombinator.com