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

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

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.

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.

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.

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.

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

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

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

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

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.

Thanks!