8 ms·
Show HN: Create animations by dragging an element with your mouse
- natovan 5y agoAlways thought about this too. Also interesting if this is possible as a plugin for Vegas or Premiere
- OpFour 5y ago
- roguas 5y agoThis 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.
- pizzabearman 5y agoI love the how quick and easy it gets right to the point
- panphora 5y agoHi 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/ http://motioncomicbuilder.storylog.com/ [1] https://github.com/panphora/animatize https://github.com/panphora/animatize
- themodelplumber 5y agoWhat 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.
- santa_boy 5y agoThanks 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!
- DarthNebo 5y agoThis 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.
- Keyframe 5y agoFWIW it's called Motion sketch in After effects and it's basically the same thing. It allows you to edit the curve after though.
- 123pie123 5y agothanks - love it, nice, simple and effective
- appliku 5y agoThat's pretty cool. I always thought animation making should look like this, not million of layers and dots. GJ!
- cuttysnark 5y agoThis 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.
- panphora 5y agoSeeing 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.
- Linkd 5y agoLove 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?)
- somishere 5y agoSVG would be cool too :)
- dane-pgp 5y agoIf 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.
- uxamanda 5y agoNot 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 :-)
- panphora 5y agoYes, 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.
- fourteenfour 5y agoImageMagick might work well for making gifs.
- sam1234apter 5y agoamazing tool - loving it so far
- cercatrova 5y agoDidn'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/ https://31launches.com/
- panphora 5y agoI 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.
- anthonyjdella 5y agoIf it makes you feel any better, it takes me 18 hours to figure out how to write a for loop.
- can16358p 5y agoRemindes me of the video Inventing on Principle by Bret Victor.
- daenz 5y agoThis 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.
- wraptile 5y agoI'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.
- panphora 5y agoThis sounds like a great real-time teaching style. Can you point us to the videos you're talking about?
- woojoo666 5y agoThis 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 https://www.youtube.com/watch?v=J-fXTRHApRc
- leobg 5y agoHow 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?
- riidom 5y agoYes 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.
- sarwech 5y agoThis is really cool. As others have said I'd love to see an option to output a GIF and additional animation options.
- panphora 5y agoWhat 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 https://31launches.com
- pdm55 5y agoI 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?
- tehwebguy 5y agoVery cool! Does anyone know if something like this exists for video? Like "motion tweening" but with my mouse in real time?
- dorkwood 5y agoAfter Effects has a feature called "motion sketch" which does this for video. It's a little bit harder to get up and running, though.
- sergei_ws 5y agoHey, 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 https://ibb.co/w4h7FVD Link: https://talevideo.com https://talevideo.com
- uxamanda 5y agoThis 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. :-)
- panphora 5y agoThat'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.
- CamelRocketFish 5y agoDid you mean tweening? I haven’t heard of tweeting used in the context of animation.
- uxamanda 5y agoHa! Yes, the forever battle with auto correct. Although I'm sure it could be made to auto-tweet :-P
- indiantinker 5y agoSo cool! Congratulations
- ricardobeat 5y agoHas anyone tried to create a modern version of Flash / Director? Feels like those tools had already solved these problems nicely 20 years ago.
- toisanji 5y agoAwesome work, this is a semi related project I built, but not really: https://concepts.jtoy.net/ https://concepts.jtoy.net/ How can I contact you?
- mrhektor 5y agoThis 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!
- heleninboodler 5y agoAgreed 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 https://www.youtube.com/watch?v=xpLQAfxSnIk
- sucrose 5y agoIt'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 https://animatize.com/js/main.js?v=131
- micheljansen 5y agoLovely! 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 https://www.youtube.com/watch?v=xmjRKd9E7Cw
- TuringTest 5y agoDrawing 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.
- rjtavares 5y agoI 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 https://www.youtube.com/watch?v=Abo7NZZ8VHs
- howaboutnope 5y ago> 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.
- ljm 5y agoThis is nice, it reminds me of how OpenShot Video handles animations by default.