Live data from Hacker News

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

animatize.com

31–40 of 59 posts

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

#32
post #2

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 mo…

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!

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

#34
post #2

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 mo…

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.

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

#36
post #6

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

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.

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

#37

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.

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

#38

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.

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

#39

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

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

#40

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

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