16
27 Comments

How do you create product gifs?

Hey everyone, I was wondering what tools everyone used to create those fancy product gifs often seen on landing pages (i.e. gif of how the UI works). I figure I could try to throw something together in a video editing app and export as a gif or just record myself using the UI, but that doesn't feel as polished. Are there apps out there where I could edit together a product gif more easily or something along those lines?

Would love any tips or tricks for how everyone accomplishes that!

  1. 3

    This topic has the best timing! I've been looking for solutions these past weeks to do exactly what you're talking about (but at scale) and there is are multiple options available:

    • Record your screen using any types of software (or Shift +⌘+5 on mac) then use Screenflow

    Quite easy to do, does not take a lot of time but for a great looking result some planning, storyboarding and overall preparations will have to be done. You can also use Adobe Premiere or Davinci Resolve to edit the video (more professional soft, with more options thus steeper learning curve).

    • Design on Figma and animate it directly on Figma.

    Definitively handy if you're looking to convey an idea to coworkers but not ideal if you're looking for something that looks dope.

    There is definitely a learning curve and some little stuff like not being able to directly change the color of text on Principle (because it imported as some kind of flat pixel file) is a deal-breaker if you're looking to make a lot of micro animations over the same loop.

    Easier to jump in and definitively interesting if you are a dev (React) It Is harder to grasp when you're a designer. Imho it works best for mobile Apps.

    • Design on whatever then use Adobe after effects + Lottie

    The highest quality you could get but even as a designer myself, I'm getting help from a motion designer on this stuff (If you're not familiar with motion design, prepare for weeks of pain).

    Our own animation on abyssale.com has been made that way.

    1. 1

      This is amazing, thank you for sharing all of that!

  2. 1

    You can also use our product toonclip.com to create animations in minutes.

  3. 1

    Id really like to get to a point where you can do this inside Story Creator

  4. 1

    I wishI had of seen some of these options when we were doing this a few months ago! We tried everything.. the screen recording route, plugins etc. We ended up designing in Sketch, exporting the CSS and building it out using JS.

    Take a look on the home page (3 main sections): obie.ai

  5. 1

    I tried a few options an you can do it by just using a screen recorder extension with chrome. The biggest issue I faced however was scaling the UI down. You need to make the screen much smaller in order to fit it onto another screen and you can't just reduce the size or the text will become illegible.

    In the end I just created some mock ups in SVG and animated them with css animations like this (scroll down)
    https://acorde.app/4-steps-to-collecting-feedback

    1. 1

      Ah that's an awesome idea, I have most of my UI mocked up so I could probably go the SVG route as well. Thanks!

  6. 1

    If you haven't tried out Plainly by @NebojsaS , definitely check it out: https://plainly.shop/.

    Automated creation of product videos based on your website's link alone, kind of mind blowing. Not sure if this format would be what you're looking for, but there are several formats/templates to choose from. It outputs a video file but you could then convert this to GIF with another tool.

    1. 3

      went there hoping to see a demo video they generated .. if they can't add one it's probably not worth looking at.

      UPDATE: you can see some samples here https://www.indiehackers.com/post/send-me-a-link-to-your-product-and-ill-generate-a-video-ad-for-you-d444107dcb

      I do hope they add some of these to their landing page

      1. 2

        Hi! You raised a great point and that's definitely something i'll do. Interestingly enough a few of users also said this yesterday via email so it's definitely on top of my to-do list.

        1. 1

          :) Thanks for getting back to me. I think it will help users understand what the platform offers.

          Good luck with it mate.

      2. 1

        He's an indie hacker just like us and recently came out of beta, some work still needs to be done it seems. see his other thread with 289 comments and other links to videos: https://www.indiehackers.com/post/send-me-a-link-to-your-product-and-ill-generate-a-video-ad-for-you-d444107dcb

    2. 1

      Wait, how does a presentational video creation company not have a video for themselves? That is looks really fishy.

      1. 1

        Fair enough, i wouldn't buy from a website that sells videos but doesn't have a video of their own. I've been ocupied by so much stuff that this didn't even cross my mind. As i replied in the comment above, i'll add a few examples and a video of our own. Thanks for the constructive feedback Cristian!

      2. 1

        Good point but he recently released from a beta..still has some work to do. You can check out some of the videos he made before hand from his first thread: https://www.indiehackers.com/post/send-me-a-link-to-your-product-and-ill-generate-a-video-ad-for-you-d444107dcb

  7. 1

    Synfig - I think it's available on all platforms and is free! If you visit a meeting lobby here https://jumpon.io/z7zd-a7vj-y351 (on desktop) you'll see what I did with an hour or so, but you need the images already. Synfig is just good for the transitions

    1. 1

      Synfig looks really interesting, I'll have to take a look, thanks!

  8. 1

    Loom, Zappy, OBS - there're so many options out there right now

    P.S. Specifically on MacOS I use LiceCAP

  9. 1

    I wish there was software to do this, too! In the meantime, I'm making a mockup in Illustrator, adding motion in after effects, and using photoshop to convert it to a gif. It's a process :-/ Here's an overview of InVision's process for it: https://www.invisionapp.com/inside-design/7-tips-for-designing-awesome-gifs/

  10. 1

    I have a live demo instead of a gif 🙃

    If you can, I think it’s the most powerful way to demo the product.

    👉 https://pqina.nl/doka/

    I’ve also created sites where I just captured the screen with getkap.co and then would load it with a <video> element.

    For Twitter I also use Kap and optimize with https://ezgif.com/optimize, for some reason gifs always look better than mp4

  11. 1

    I've been meaning to ask this too.

    I see some really cool landing pages with high quality and fairly large gifs, which nevertheless load fast, and wondered what software is used to create the gifs and where to host them so the site still loads fast.

  12. 1

    I feel like there are better tools out there. However, I've used giphy to create a couple gif's in the past. Hopefully, someone can give you a better tool though (and I'll learn too!).

Trending on Indie Hackers
How I grew a side project to 100k Unique Visitors in 7 days with 0 audience 48 comments Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 28 comments $15k revenues in <4 months as a solopreneur 14 comments My Top 20 Free Tools That I Use Everyday as an Indie Hacker 13 comments Use Your Product 13 comments