13
11 Comments

How to make a video with animation of the interface?

Recently, I found quite a lot of startups who are using nice-looking videos of their interface for the promo. The latest example from the top of PH product for yesterday.

I'd like to make similar video for my project, but I'd need to understand first - is it some special software used or it's just manual painstaking work?

on March 1, 2021
  1. 3

    I think you can use something like this? https://www.powtoon.com/
    I haven't used it myself but looks similar to the effect you're asking

    1. 1

      Thank you @justnw for your advice! Unfortunately, it seems like powtoon does not have that functionality.

  2. 2

    If you are using screengrabs, you can use Rotato: https://www.rotato.xyz

    I needed a simplified version of my UI, so used Tumult Hype : https://tumult.com/hype/

    All the animations on my site were created using Hype : https://www.reschedule.app

  3. 2

    I'm building a tool that can help with this!

    MockRocket.io will let you drag and drop a screen capture into your web browser and create professional looking promo videos with your app on the screen of a 3D laptop, phone, tablet, etc. You can spin it around in 3D space to zoom in on different parts of the interface just like in the example video you linked to. It's pretty easy to use even without video editing experience.

  4. 2

    Hi Andrey,

    I just got done working on a motion video for my app, FlipNotes. I personally didn't want to spend the money to pay someone to create the video, so figured I would do it myself. You can check out my final result here: https://www.youtube.com/watch?v=PNjEhgYrgmk&t

    I had no prior experience creating Motion videos, but it wasn't terrible to put together. I'd recommend getting a free trial to Adobe After Effects and learning some of the basics if you'd like to do it yourself. You can also purchase a lot of templates that can help you get started. I personally bought a template of an iPhone that I used to embed my recordings. There is also a course on DesignCode.io if you want a more in depth tutorial on how to create an app promo video.

    I personally put the final product together in Final Cut Pro, but I know Adobe Premiere is another option. Hope this helps!

    1. 1

      Hi @mgrill!

      Your video looks great! Where do you think the best place to buy a template?

  5. 2

    Its not based on any special software's. It can done by using regular video softwares and manual video editors with knowledge of doing the same.
    Better hire someone from upwork and pay not more than 250$/project and show the above video as demo.. incase you need any specific music, you buy the license and share the music with them.

  6. 2

    It's not that complicated. What you see there is a skewed image, sometimes zoomed, moving in different directions.

    Rather easy to to in Final Cut, and in a few months, I'll add something like this in my app as well 😁

  7. 2

    What you are looking for is a Motion Graphics Video. There are a few ways you can get a video like this.

    1. Hire a freelancer - you can find a good freelancer on Upwork which who will create one for you for anywhere from $400 to $xxxx. You can just show them the reference video and they will give you a quote.

    2. Do it yourself with a bunch of online tools. Just type in Motion Graphics video maker or something like this. This will sacrifice quality but it will be at a much lower price point. Any online video creator that will allow you to create videos from a template will help you create a similar video.

  8. 1

    As far as I know, interface animation is one of the most difficult types of animation. I started doing animated videos thanks to my genuine love, which was instilled in me as a child for cartoons. After that, it all started as a very ordinary hobby that I was doing in my spare time. But now I have moved on to this as my main activity, which brings me a constant excellent income. I work freelance. As for the convenient software, I prefer Vyond. Using the service https://bestcoupon.store/coupons/vyond-coupon-code / you can get a discount on it.

Trending on Indie Hackers
I shipped 3 features this weekend based entirely on community feedback. Here's what I built and why. User Avatar 155 comments I'm a lawyer who launched an AI contract tool on Product Hunt today — here's what building it as a non-technical founder actually felt like User Avatar 139 comments “This contract looked normal - but could cost millions” User Avatar 53 comments 👉 The most expensive contract mistakes don’t feel risky User Avatar 40 comments The indie maker's dilemma: 2 months in, 700 downloads, and I'm stuck User Avatar 32 comments I spent weeks building a food decision tool instead of something useful User Avatar 27 comments