This is really cool. As others have said I'd love to see an option to output a GIF and additional animation options.
Show HN: Create animations by dragging an element with your mouse
11–20 of 59 posts
Re: Show HN: Create animations by dragging an element with your mouse
#12Very cool!
Does anyone know if something like this exists for video? Like "motion tweening" but with my mouse in real time?
Re: Show HN: Create animations by dragging an element with your mouse
#13This 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. :-)
Re: Show HN: Create animations by dragging an element with your mouse
#14Love 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 :-)
Re: Show HN: Create animations by dragging an element with your mouse
#15So cool! Congratulations
Re: Show HN: Create animations by dragging an element with your mouse
#16Love 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?)
SVG would be cool too :)
Re: Show HN: Create animations by dragging an element with your mouse
#17Has anyone tried to create a modern version of Flash / Director? Feels like those tools had already solved these problems nicely 20 years ago.
Re: Show HN: Create animations by dragging an element with your mouse
#18This 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.
Re: Show HN: Create animations by dragging an element with your mouse
#19This 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.
Re: Show HN: Create animations by dragging an element with your mouse
#20Remindes 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.