
Show HN: Animockup – An open-source design tool to make animated mockups - alyssaxuu
https://animockup.com/
======
alyssaxuu
After noticing how hard it was to create shots on Dribbble without the proper
tools (e.g. After Effects), I decided to work on a tool to create animated
mockup videos and GIFs on the web, for free. Using FabricJs I added a fully
interactive canvas, and I thought I might as well add the option to add
textboxes and images for more complex designs.

I've also open sourced the code, so if anyone wants to create something
similar or expand on the concept you are completely free to (and encouraged
to!) :)

~~~
davecyen
I’m looking into fabricJS for a project I’m working on too. Did you try other
libraries like konva?

~~~
alyssaxuu
I actually didn't, but I'm pretty sure it is similar in terms of capabilities.
I liked FabricJs because of its thorough documentation, having lots of
examples, and because I saw a strong community on GitHub and other places.

FabricJs was a bit counter intuitive in some aspects though, for example the
way it handles the rendering in the canvas made it pretty hard for me to be
able to get a video / GIF out of it leading me to have to use a pretty complex
setup. Image scaling is also a bit odd in terms of how it deals with
cropping/stretching, so that was a bit messy for getting source footage and
putting it within a region in a device.

------
ollerac
I'm going to use this when I launch my next project. Looks really useful and
easy to use.

If you could figure out the right UI, this would make a great phone app for
consumers.

~~~
alyssaxuu
That was the idea :) Glad you think so too!

And yeah, I can definitely see that. Shouldn't be too hard to come up with a
mobile-friendly UI I think.

------
strangecyan
Hey Alyssa, really useful tool thank you. Currently silently fails on Safari
when trying to export an MP4 as the MediaRecorder API doesn't exist. Might be
worth putting a notice on what browsers you're supporting.

~~~
alyssaxuu
Agh, you are correct. Just put up a disclaimer whenever people try to use the
tool in Safari. Thanks for the heads up!

------
morajabi
I love it, great job! Question for you: How was the idea born Alyssa?

~~~
alyssaxuu
Thanks! Basically it was just an inconvenience I had whenever making product
announcements/concepts for both Dribbble and Twitter, where I would record the
screen of a product in action and then have to spend ages in After Effects to
make it look nice with a prototype, render, and then usually have to get the
video, compress it, and use a MP4 to GIF converter if I wanted to post in
Twitter (GIFs seem to be more effective there).

With this tool I literally just upload the recording, quickly place it however
I like, and I can export directly as GIF. No hassle :P

------
notlukesky
Can you allow the import of images as well in addition to video?

~~~
alyssaxuu
You mean to use for the screens in the devices? The thing is though that the
video/GIF export in that case would be useless as the whole thing would be
static. So while it's completely possible for me to add, I just don't see it
making much sense with the current setup.

------
notlukesky
Thanks!

