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
How I built an AI workflow with preview, approval, and monitoring User Avatar 64 comments Show IH: I'm building a lead gen + CRM tool for web designers targeting local businesses without websites — starting with Spain User Avatar 62 comments I built a URL indexing SaaS in 40 days — here's the honest story User Avatar 53 comments After 4 landing page rewrites, I finally figured out why my analytics SaaS wasn't converting User Avatar 21 comments We witnessed a sharp spike in our traffic. So much happiness after a long time. User Avatar 15 comments Creative Generator — create product-focused visuals and ad concepts faster User Avatar 11 comments