https://github.com/alyssaxuu/animockup

Create animated mockups in the browser 🔥
https://github.com/alyssaxuu/animockup

canvas design design-tools editor javascript marketing marketing-tools tool

Last synced: 6 days ago
JSON representation

Create animated mockups in the browser 🔥

• Host: GitHub
• URL: https://github.com/alyssaxuu/animockup
• Owner: alyssaxuu
• License: mit
• Created: 2020-03-21T04:45:36.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2022-07-02T08:12:35.000Z (over 2 years ago)
• Last Synced: 2024-12-29T07:06:50.712Z (13 days ago)
• Topics: canvas, design, design-tools, editor, javascript, marketing, marketing-tools, tool
• Language: JavaScript
• Homepage: https://animockup.com
• Size: 42.8 MB
• Stars: 1,660
• Watchers: 34
• Forks: 144
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-canvas - animockup - Create animated mockups in the browser 🔥   (Libraries / Image processing)
• awesome-starred-test - alyssaxuu/animockup - Create animated mockups in the browser 🔥 (JavaScript)
• awesome-list - animockup
• awesome-docs - Animockup
• awesome-documentation - Animockup - A web-based tool that helps you create animated mockups for your product teasers. (General Tools / Multimedia)

README

        
# Animockup

![Demo](preview.gif)




Create stunning product teasers with animated mockups 🔥

Animockup is a web-based tool that helps you create animated mockups for your product teasers. Add gradient backgrounds, browse through 20+ mockups, customize the export settings, and much more.

[👉 Get it now](https://animockup.com)



> You can support this project (and many others) through [GitHub Sponsors](https://github.com/sponsors/alyssaxuu)! ❤️

Made by [Alyssa X](https://twitter.com/alyssaxuu)

## Table of contents

- [Features](#features)

- [Self-hosting Animockup](#self-hosting-animockup)

- [Libraries used](#libraries-used)

## Features

📹 Add a video or image of the product you want to showcase


📱 Choose from 20+ device mockups and frames


✂️ Crop and reposition your video in the mockup screen


🎨 Customize the background, with gradients


✏️ Add text and images to enhance your video


🪄 Choose the start and end animations from multiple presets


⏱ Set the video duration and change the easing of the animation


🎚️ Set the framerate, export format, and resolution


...and much more!


## Self-hosting Animockup

In order to self-host Animockup, you will need to make a few changes.

1. Create a [Firebase project](https://firebase.google.com/)


2. Update the firebaseConfig object in the [index.html](src/index.html) with your own values


3. Animockup uses Paddle for subscriptions. You can either remove it entirely, or update with your own values in the [main.js](src/main.js) and [api.php](src/api.php) files.

## Libraries used

- [jQuery](https://jquery.com/) - for better event handling and DOM manipulation

- [FabricJs](http://fabricjs.com/) - for the interactive canvas

- [CanvasRecorder.js](https://github.com/SMUsamaShah/CanvasRecorder) - for recording the canvas

- [FFMPEG](https://www.ffmpeg.org/) - for converting the videos to different formats

- [jQuery Nice Select](https://hernansartorio.com/jquery-nice-select/) - for better dropdowns

- [Pickr](https://github.com/Simonwep/pickr) - for a better color picker

- [Anime.js](https://animejs.com/) - for animating the mockups

- [fix-webm-duration](https://github.com/yusitnikov/fix-webm-duration) - to make webm videos seekable

- [Paddle](https://paddle.com/) - for handling subscription payments

- [Firebase](https://firebase.com/) - for authentication

#

Feel free to reach out to me through email at [email protected] or [on Twitter](https://twitter.com/alyssaxuu) if you have any questions or feedback! Hope you find this useful 💜