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!
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:
Our own animation on abyssale.com has been made that way.
This is amazing, thank you for sharing all of that!
You're welcome ;)
You can also use our product toonclip.com to create animations in minutes.
Anybody try Hype? - https://tumult.com
Id really like to get to a point where you can do this inside Story Creator
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
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
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!
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.
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
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.
:) Thanks for getting back to me. I think it will help users understand what the platform offers.
Good luck with it mate.
Thanks man!
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
thanks
Wait, how does a presentational video creation company not have a video for themselves? That is looks really fishy.
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!
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
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
Synfig looks really interesting, I'll have to take a look, thanks!
Loom, Zappy, OBS - there're so many options out there right now
P.S. Specifically on MacOS I use LiceCAP
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/
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
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.
I’m using https://zapier.com/zappy
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!).