Turning Screen Recordings into Animated GIFs✨
![Turning Screen Recordings into Animated GIFs✨](/content/images/size/w2000/2020/09/tenor.gif)
So, I love animated GIFs. Anybody who has worked with me knows that I love them and am quick at posting context-appropriate GIFs into a Slack channel.
Apparently, you can use GIFs for serious business.
So I had to make a demo for a client, and I used Quicktime Pro's "New Screen Recording" feature. It lets you record a rectangle on your screen and when you are done you get a .MOV
file in the player. You can use Split (Command-Y) to turn the video into small chunks that you can re-arrange or delete as you need.
![](https://blog.dadops.co/content/images/2020/09/Screen-Shot-2020-09-02-at-10.13.33-PM-1.png)
Once you've edited down your file to just the essentials, you are now ready to turn it into an animated GIF. Unfortunately, there's no export option. Luckily there's a lot of open-source tools. They are all hard to use, but someone else has made them easier. gifify
will link these tools together behind-the-scenes and convert your GIF.
To install it you'll need some pre-requisites. I am assuming you have homebrew
if you are using a Mac:
brew install node
brew install ffmpeg
brew install imagemagick
brew install giflossy
npm install -g gifify
gifify
has a lot of great options, for my simple screenshots I use the following:
gifify demo.mov -o demo.gif --speed 2 --fps 5
This takes my demo.mov
and generates a demo.gif
. It sets the speed to double the recording speed (because I do my demos slowly) and the frames per second to 5 because nothing fancy is happening.
Here's the result:
![](https://blog.dadops.co/content/images/2020/09/demo.gif)
There are tools out there that can do this, but this was an easy work flow for me. I live in the command line, and it has tools that I already have on my computer.
Send me your favorite GIFs: GIFs@davedash.33mail.com